import { NavLink, useSearchParams } from "react-router-dom";
import { cn } from "@/lib/utils";
import { workspaceHref } from "@/services/tripWorkspaceState";

const sections = [
  ["Itinéraire", "itinerary"], ["Voyageurs", "travelers"],
  ["Documents", "documents"], ["Messages", "messages"],
] as const;

export function TripWorkspaceNav({ tripId }: { tripId: string }) {
  const [search] = useSearchParams();
  const base = `/dashboard/trips/${tripId}`;
  return <nav aria-label="Sections du voyage" className="overflow-x-auto border-b bg-card px-4 sm:px-6 lg:px-8"><div className="mx-auto flex min-w-max max-w-[1320px] gap-6">
    {sections.map(([label, segment]) => <NavLink key={label} to={workspaceHref(`${base}/${segment}`, search)} className={({ isActive }) => cn("flex min-h-11 items-center border-b-2 border-transparent py-3 text-sm font-medium text-muted-foreground hover:text-foreground", isActive && "border-primary text-foreground")}>{label}</NavLink>)}
  </div></nav>;
}