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 (
    <div className="inline-flex flex-wrap gap-2">
      {options.map((option) => (
        <button
          key={option}
          className={`rounded-xl border px-6 py-3 text-base font-semibold transition-colors ${
            option === active
              ? "border-accent bg-accent text-white shadow-sm"
              : "border-slate-300 bg-white text-slate-700 hover:border-slate-400"
          }`}
          onClick={() => onChange(option)}
          type="button"
        >
          {option}
        </button>
      ))}
    </div>
  );
}