import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

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

type ToggleChoiceProps<T extends string> = {
    value: T | null;
    options: readonly Option<T>[];
    onChange: (value: T | null) => void;
    size?: 'sm' | 'default';
    ariaLabel?: string;
};

export function ToggleChoice<T extends string>({
    value,
    options,
    onChange,
    size = 'sm',
    ariaLabel,
}: ToggleChoiceProps<T>) {
    return (
        <div
            className="flex items-center gap-1"
            role="radiogroup"
            aria-label={ariaLabel}
        >
            {options.map((opt) => {
                const active = value === opt.value;
                return (
                    <Button
                        key={opt.value}
                        type="button"
                        variant={active ? 'default' : 'outline'}
                        size={size}
                        aria-pressed={active}
                        onClick={() =>
                            onChange(active ? null : opt.value)
                        }
                        className={cn(
                            'min-w-12',
                            !active && 'text-muted-foreground',
                        )}
                    >
                        {opt.label}
                    </Button>
                );
            })}
        </div>
    );
}