import {clsx} from "clsx";
import {NavLink} from "react-router-dom";
import {IconNavigationArrow} from "@/components/icons";
import useAuth from "@/hooks/useAuth.ts";

const NavItems = [
	{
		key: 'news',
		name: '新闻素材',
		icon: 'news',
		path: '/'
	},
	{
		key: 'video',
		name: '新闻编辑',
		icon: 'e',
		path: '/edit'
	},
	{
		key: 'create',
		name: '视频生成',
		icon: 'ai',
		path: '/create'
	},
	// {
	// 	key: 'library',
	// 	name: '视频库',
	// 	icon: '+',
	// 	path:'/library'
	// },
	{
		key: 'live',
		name: '数字人直播间',
		icon: 'v',
		path: '/live'
	}
]

export function DashboardNavigation() {
	const {user} = useAuth()
	return (<div className={'flex app-main-navigation'}>
			{NavItems.map((it, idx) => (<div key={idx} className={"flex items-center"}>
				{user ? <NavLink to={it.path} className={clsx('nav-item cursor-pointer items-center')}>
					<span className="menu-text ml-2">{it.name}</span>
				</NavLink> : <div className={clsx('nav-item cursor-pointer items-center')}>
					<span className="menu-text ml-2">{it.name}</span>
				</div>}
				{idx !== NavItems.length - 1 && <IconNavigationArrow className="ml-2" />}
			</div>))}
		</div>
	);
}