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

export type SegmentedToggleOption<T extends string> = {
  value: T;
  label: string;
};

/**
 * Generic segmented control (e.g. Lista/Kanban). Active option gets
 * bg-card + shadow-sm to read as a "raised" tab against the bg-muted track.
 */
export function SegmentedToggle<T extends string>({
  options,
  value,
  onChange,
  className,
}: {
  options: SegmentedToggleOption<T>[];
  value: T;
  onChange: (value: T) => void;
  className?: string;
}) {
  return (
    <div className={cn("flex items-center gap-1 bg-slate-200/60 dark:bg-white/5 rounded-lg p-1 w-fit", className)}>
      {options.map((option) => {
        const active = option.value === value;
        return (
          <button
            key={option.value}
            type="button"
            onClick={() => onChange(option.value)}
            className={cn(
              "px-3 py-1.5 rounded-md text-xs font-semibold transition-all duration-200",
              active
                ? "bg-card text-foreground shadow-sm"
                : "text-muted-foreground hover:text-foreground"
            )}
          >
            {option.label}
          </button>
        );
      })}
    </div>
  );
}
