"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  CalendarDays,
  CircleDollarSign,
  DatabaseZap,
  FileText,
  Handshake,
  FolderKanban,
  LayoutDashboard,
  Timer,
  Users,
  UsersRound
} from "lucide-react";
import { cn } from "@/lib/utils";

const navItems = [
  { href: "/personnes", label: "Équipe", icon: Users },
  { href: "/projets", label: "Projets", icon: FolderKanban },
  { href: "/projets/fiche", label: "Fiche projet", icon: FileText },
  { href: "/", label: "Agence", icon: LayoutDashboard },
  { href: "/planning", label: "Charge collaborateurs", icon: CalendarDays },
  { href: "/portefeuille", label: "Portefeuille", icon: UsersRound },
  { href: "/staffing", label: "Staffing", icon: Handshake },
  { href: "/saisie-temps", label: "Temps", icon: Timer },
  { href: "/facturation", label: "Facturation", icon: CircleDollarSign },
  { href: "/imports-exports", label: "Imports", icon: DatabaseZap }
];

export function MainNav() {
  const pathname = usePathname();

  return (
    <nav className="min-w-0 flex-1 overflow-x-auto">
      <div className="flex w-max gap-1">
        {navItems.map((item) => {
          const isActive = item.href === "/" || item.href === "/projets" ? pathname === item.href : pathname.startsWith(item.href);

          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "inline-flex h-8 shrink-0 items-center gap-2 rounded-md px-3 text-xs font-bold text-white/75 transition-colors hover:bg-white/10 hover:text-white",
                isActive && "bg-accent text-white hover:bg-accent hover:text-white"
              )}
            >
              <item.icon className="h-3.5 w-3.5" />
              {item.label}
            </Link>
          );
        })}
      </div>
    </nav>
  );
}