export type RadioOption<V extends string> = { value: V; label: string };

export type RadioGroupProps<V extends string> = {
  name: string;
  value: V;
  onChange: (value: V) => void;
  options: Array<RadioOption<V>>;
  disabled?: boolean;
};

export function RadioGroup<V extends string>(props: RadioGroupProps<V>) {
  return (
    <div className="panel-radio-group" role="radiogroup">
      {props.options.map((opt) => (
        <label key={opt.value} className="panel-radio">
          <input
            type="radio"
            name={props.name}
            value={opt.value}
            checked={props.value === opt.value}
            disabled={props.disabled}
            onChange={() => props.onChange(opt.value)}
          />
          <span>{opt.label}</span>
        </label>
      ))}
    </div>
  );
}