import { ViewTransitionLink } from "@cv/routing";
import { useLocation } from "react-router-dom";
import { ProfileSwitcher } from "@/features/profile/components/ProfileSwitcher";
import { cn } from "@/utils/cn";
import type { NavLink } from "./navLinks";
import { UserProfileDrawer } from "./UserProfileDrawer";

type NavbarProps = {
  user: {
    name: string;
  };
  onLogout: () => void;
  links: NavLink[];
};

export const Navbar = ({ user, onLogout, links }: NavbarProps) => {
  const location = useLocation();

  const isActive = (path: string) =>
    location.pathname === path || location.pathname.startsWith(`${path}/`);

  return (
    <nav className="border-b border-ctp-surface0 bg-ctp-crust/40">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex min-h-16 items-center justify-between py-2">
          <div className="flex items-center space-x-4 sm:space-x-8">
            <ViewTransitionLink
              to="/"
              className="text-xl font-bold text-ctp-text"
            >
              CV Generator
            </ViewTransitionLink>
            <div className="hidden sm:flex space-x-4">
              {links.map((link) => (
                <ViewTransitionLink
                  key={link.to}
                  to={link.to}
                  className={cn(
                    "rounded-md px-3 py-2 text-sm font-medium transition-colors",
                    isActive(link.to)
                      ? "bg-ctp-surface0 text-ctp-blue"
                      : "text-ctp-text hover:bg-ctp-surface0",
                  )}
                >
                  {link.label}
                </ViewTransitionLink>
              ))}
            </div>
          </div>

          <div className="flex items-center gap-2">
            <ProfileSwitcher />
            <UserProfileDrawer user={user} onLogout={onLogout} />
          </div>
        </div>
      </div>
    </nav>
  );
};