import Link from "next/link";
import { cn } from "@/lib/utils";
import type { ProductStatus } from "@/lib/data";
import { STATUS_LABELS } from "@/components/StatusBadge";

const TABS: { value: ProductStatus | "all"; label: string }[] = [
  { value: "all", label: "Tous" },
  { value: "a_discuter", label: STATUS_LABELS.a_discuter },
  { value: "garder", label: STATUS_LABELS.garder },
  { value: "rejeter", label: STATUS_LABELS.rejeter },
];

export function StatusTabs({
  active,
  searchParams,
}: {
  active: string;
  searchParams: Record<string, string | undefined>;
}) {
  return (
    <div className="flex gap-1 rounded-lg bg-muted p-1 text-sm">
      {TABS.map((tab) => {
        const params = new URLSearchParams();
        if (tab.value !== "all") params.set("status", tab.value);
        if (searchParams.tag) params.set("tag", searchParams.tag);
        if (searchParams.sort) params.set("sort", searchParams.sort);
        const query = params.toString();
        const isActive = active === tab.value;

        return (
          <Link
            key={tab.value}
            href={query ? `/?${query}` : "/"}
            className={cn(
              "rounded-md px-3 py-1.5 font-medium transition-colors",
              isActive
                ? "bg-background shadow-sm"
                : "text-muted-foreground hover:text-foreground",
            )}
          >
            {tab.label}
          </Link>
        );
      })}
    </div>
  );
}