import Link from "next/link";
import { cn } from "~/lib/utils";
import { LogoSvg } from "~/components/svgs";
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"
        href="/"
        className="flex shrink-0 items-center font-medium md:mb-0"
      >
        <LogoSvg className="[&>text]:fill-primary [&>text]:stroke-primary h-8 w-auto [&>g]:fill-red-500" />
      </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}
            key={item.href}
            href={item.href}
            className={cn(
              "hover:text-primary/80 transition-colors",
              pathname === item.href ? "text-primary" : "text-primary/70",
            )}
          >
            {item.title}
          </Link>
        ))}
      </nav>
    </div>
  );
}
