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



export function DashboardNavigation() {
	const {t,i18n} = useTranslation()
	const {user} = useAuth()
	const NavItems = useMemo(()=>([
		{
			key: 'news',
			name: t('nav.materials'),
			icon: 'news',
			path: '/'
		},
		{
			key: 'video',
			name: t('nav.editing'),
			icon: 'e',
			path: '/edit'
		},
		{
			key: 'create',
			name: t('nav.generating'),
			icon: 'ai',
			path: '/create'
		},
		// {
		// 	key: 'library',
		// 	name: '视频库',
		// 	icon: '+',
		// 	path:'/library'
		// },
		{
			key: 'live',
			name: t('nav.live'),
			icon: 'v',
			path: '/live'
		}
	]),[i18n.language])
	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>
	);
}