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

interface Props<T extends string> {
    value: T;
    options: ReadonlyArray<Option<T>>;
    onChange: (value: T) => void;
}

export const SegmentedRadio = <T extends string>({ value, options, onChange }: Props<T>) => (
    <div className="srad">
        {options.map(o => (
            <button
                key={o.value}
                className={`srad-btn${value === o.value ? ' is-active' : ''}`}
                onClick={() => onChange(o.value)}
                type="button"
            >
                {o.label}
            </button>
        ))}
    </div>
);