"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { t } from "@/lib/i18n/de";

const TABS = [
  { href: "/fahrzeuge", labelKey: "search.tabFahrzeuge" as const },
  { href: "/geraete", labelKey: "search.tabGeraete" as const },
  { href: "/wehren", labelKey: "search.tabWehren" as const },
];

/**
 * Tab-Navigation der Suche (Fahrzeuge · Geräte · Wehren). Jeder Tab ist ein
 * echter Link auf die jeweilige Route-Group-Seite; die aktive Route bestimmt
 * den ausgewählten Tab. Die Tab-Inhalte rendern die jeweiligen Seiten selbst.
 */
export function SearchTabs() {
  const pathname = usePathname();
  const active = TABS.find((tab) => pathname.startsWith(tab.href))?.href;

  return (
    <Tabs value={active}>
      <TabsList aria-label={t("nav.fahrzeuge")}>
        {TABS.map((tab) => (
          <TabsTrigger key={tab.href} value={tab.href} asChild>
            <Link href={tab.href}>{t(tab.labelKey)}</Link>
          </TabsTrigger>
        ))}
      </TabsList>
    </Tabs>
  );
}
