import Link from "next/link";
import { cn } from "@/lib/utils";

export type FilterTabOption = {
  value: string;
  label: string;
  count?: number;
};

/**
 * URL-driven status pills (server component — no client JS).
 * Selecting a tab rewrites the page's searchParams and resets pagination.
 */
export function FilterTabs({
  basePath,
  param = "status",
  current,
  options,
  className,
}: {
  basePath: string;
  param?: string;
  current: string;
  options: FilterTabOption[];
  className?: string;
}) {
  return (
    <div
      className={cn(
        "-mx-1 mb-4 flex items-center gap-1 overflow-x-auto px-1 pb-1",
        className,
      )}
    >
      {options.map((option) => {
        const active = option.value === current;
        const href =
          option.value === "all" ? basePath : `${basePath}?${param}=${option.value}`;
        return (
          <Link
            key={option.value}
            href={href}
            aria-current={active ? "page" : undefined}
            className={cn(
              "inline-flex shrink-0 items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors",
              active
                ? "border-transparent bg-primary text-primary-foreground"
                : "border-transparent text-muted-foreground hover:bg-muted hover:text-foreground",
            )}
          >
            {option.label}
            {option.count === undefined ? null : (
              <span
                className={cn(
                  "rounded-full px-1.5 py-0.5 font-mono text-[11px] leading-none",
                  active ? "bg-white/20" : "bg-muted text-muted-foreground",
                )}
              >
                {option.count}
              </span>
            )}
          </Link>
        );
      })}
    </div>
  );
}

export default FilterTabs;