import clsx from 'clsx'
import { useTranslations } from 'next-intl'
import Link from 'next/link'
import { TbDatabase, TbPuzzle } from 'react-icons/tb'

type NavigateProps = {
	className?: string
}

function Navigate({className}: NavigateProps) {
	const t = useTranslations()

	return (
		<nav className={clsx(className, 'py-3')}>
			<ul className='flex gap-x-1'>
				<li>
					<Link
						href='/'
						className='oveflow-hidden bg-primary/20 text-primary flex h-9.5 items-center justify-center rounded-md px-3 py-2 text-base font-semibold [&_svg]:mr-2 [&_svg]:size-5.5 [&_svg]:shrink-0 [&_svg]:grow-0 [&_svg]:transition-[margin-inline-end]'
					>
						<TbPuzzle />
						<span>{t('categories.components')}</span>
					</Link>
				</li>
				<li>
					<Link
						href='/datasets'
						className='oveflow-hidden dark:text-dark-gray-300 dark:hover:bg-dark-gray-800/50 flex h-9.5 items-center justify-center rounded-md px-3 py-2 text-base font-semibold text-gray-800 hover:bg-gray-100 [&_svg]:mr-2 [&_svg]:size-5.5 [&_svg]:shrink-0 [&_svg]:grow-0 [&_svg]:transition-[margin-inline-end]'
					>
						<TbDatabase />
						<span>{t('categories.datasets')}</span>
					</Link>
				</li>
			</ul>
		</nav>
	)
}

export { Navigate }

