import {
  RadioGroup,
  FormControlLabel,
  Radio,
  FormControl,
  FormLabel,
} from "@mui/material";

interface RadioGroupOption {
  label: string;
  value: string;
}

export function RadioGroupInput(p: {
  editable: boolean;
  label?: string;
  options: RadioGroupOption[];
  value: string;
  onValueChange: (v: string) => void;
}): React.ReactElement {
  return (
    <FormControl>
      {p.label && <FormLabel>{p.label}</FormLabel>}
      <RadioGroup
        row
        value={p.value}
        onChange={(_ev, v) => p.onValueChange?.(v)}
      >
        {p.options.map((o) => (
          <FormControlLabel
            disabled={!p.editable}
            value={o.value}
            control={<Radio />}
            label={o.label}
          />
        ))}
      </RadioGroup>
    </FormControl>
  );
}