import Link from "next/link";
import { LogoSvg } from "~/components/svgs";
import { cn } from "~/lib/utils";
import { useTranslation } from "~/providers/I18nProvider";

export function MainNav() {
	const { t } = useTranslation();

	return (
		<div className="hidden gap-2 md:flex lg:gap-4">
			<Link
				aria-label="mainNavLink"
				className="flex shrink-0 items-center font-medium md:mb-0"
				href="/"
			>
				<LogoSvg className="h-8 w-auto" />
			</Link>

			<nav className="flex items-center gap-4 text-lg tracking-wide lg:gap-6">
				{t.nav.mainNav.map((item) => (
					<Link
						aria-label={item.title}
						className={cn("hover:text-primary")}
						href={item.href}
						key={item.href}
					>
						{item.title}
					</Link>
				))}
			</nav>
		</div>
	);
}
