import { cn } from "@/lib/utils";

export type EntityLifecycleTab = "active" | "history";

interface ActiveHistoryTabsProps {
  value: EntityLifecycleTab;
  onChange: (value: EntityLifecycleTab) => void;
  activeCount?: number;
  historyCount?: number;
}

export function ActiveHistoryTabs({
  value,
  onChange,
  activeCount,
  historyCount,
}: ActiveHistoryTabsProps) {
  return (
    <div
      role="tablist"
      className="inline-flex w-fit rounded-xl border border-border/60 bg-muted/40 p-1"
    >
      <button
        type="button"
        role="tab"
        aria-selected={value === "active"}
        onClick={() => onChange("active")}
        className={cn(
          "rounded-lg px-4 py-1.5 text-sm font-medium transition-colors",
          value === "active"
            ? "bg-card text-foreground shadow-[var(--shadow-soft)]"
            : "text-muted-foreground hover:text-foreground",
        )}
      >
        Aktiv{activeCount !== undefined ? ` (${activeCount})` : ""}
      </button>
      <button
        type="button"
        role="tab"
        aria-selected={value === "history"}
        onClick={() => onChange("history")}
        className={cn(
          "rounded-lg px-4 py-1.5 text-sm font-medium transition-colors",
          value === "history"
            ? "bg-card text-foreground shadow-[var(--shadow-soft)]"
            : "text-muted-foreground hover:text-foreground",
        )}
      >
        Historie{historyCount !== undefined ? ` (${historyCount})` : ""}
      </button>
    </div>
  );
}