"use client";

import Link from "next/link";
import {useLocale, useTranslations} from "next-intl";
import {useSession} from "next-auth/react";
import {Button} from "@/components/ui/button";
import {Car} from "lucide-react";

export function PublicNavbar() {
  const t = useTranslations("nav");
  const locale = useLocale();
  const {data: session} = useSession();

  const navLinks = [
    {href: `/${locale}/cars`, label: t("cars")},
    {href: `/${locale}/companies`, label: t("companies")},
    {href: `/${locale}/about`, label: t("about")},
    {href: `/${locale}/contact`, label: t("contact")}
  ];

  return (
    <header className="sticky top-0 z-50 border-b border-gray-100 bg-white/80 backdrop-blur-md shadow-sm">
      <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-3.5">
        {/* Logo */}
        <Link className="flex items-center gap-2.5 group" href={`/${locale}`}>
          <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-600 shadow-sm shadow-indigo-200 transition-transform duration-200 group-hover:scale-105">
            <Car className="h-4 w-4 text-white" />
          </div>
          <span className="text-[15px] font-bold text-gray-900 tracking-tight">RentCar</span>
        </Link>

        {/* Nav Links */}
        <nav className="hidden items-center gap-1 md:flex">
          {navLinks.map(({href, label}) => (
            <Link
              key={href}
              className="rounded-lg px-3.5 py-2 text-sm font-medium text-gray-600 transition-all duration-150 hover:bg-indigo-50 hover:text-indigo-700"
              href={href}
            >
              {label}
            </Link>
          ))}
        </nav>

        {/* Auth Buttons */}
        <div className="flex items-center gap-2">
          {session ? (
            <Link href={`/${locale}/account`}>
              <Button
                size="sm"
                className="rounded-lg bg-indigo-600 hover:bg-indigo-700 shadow-sm shadow-indigo-200 font-medium"
              >
                {t("myAccount")}
              </Button>
            </Link>
          ) : (
            <>
              <Link href={`/${locale}/auth/sign-in`}>
                <Button
                  size="sm"
                  variant="ghost"
                  className="rounded-lg text-gray-600 hover:text-indigo-700 hover:bg-indigo-50 font-medium"
                >
                  {t("signIn")}
                </Button>
              </Link>
              <Link href={`/${locale}/auth/sign-up`}>
                <Button
                  size="sm"
                  className="rounded-lg bg-indigo-600 hover:bg-indigo-700 shadow-sm shadow-indigo-200 font-medium"
                >
                  {t("signUp")}
                </Button>
              </Link>
            </>
          )}
        </div>
      </div>
    </header>
  );
}