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

type MainNavProps = {
	pathname: string;
};

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

	return (
		<div className="mr-2 hidden gap-6 md:flex">
			<Link
				aria-label="mainNavLink"
				className="flex shrink-0 items-center font-medium md:mb-0"
				href="/"
			>
				<LogoSvg className="h-8 w-auto [&>g]:fill-red-500 [&>text]:fill-primary [&>text]:stroke-primary" />
			</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(
							"transition-colors hover:text-primary/80",
							pathname === item.href ? "text-primary" : "text-primary/70",
						)}
						href={item.href}
						key={item.href}
					>
						{item.title}
					</Link>
				))}
			</nav>
		</div>
	);
}