import { Tabs as TabsPrimitive, TabsList, TabsTrigger } from "@/components/ui/tabs";

type TabsProps<T extends string> = {
  options: readonly T[];
  active: T;
  onChange: (value: T) => void;
};

export default function Tabs<T extends string>({ options, active, onChange }: TabsProps<T>) {
  return (
    <TabsPrimitive value={active} onValueChange={(v) => onChange(v as T)}>
      <TabsList className="h-auto gap-2 bg-transparent p-0">
        {options.map((option) => (
          <TabsTrigger
            key={option}
            value={option}
            className="rounded-xl border border-input bg-background px-4 py-2 text-sm font-semibold text-slate-700 data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm md:px-5 md:py-2.5"
          >
            {option}
          </TabsTrigger>
        ))}
      </TabsList>
    </TabsPrimitive>
  );
}