import { type FC } from 'react';

import RadioGroup from '@material-hu/mui/RadioGroup';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuRadioButton from '@material-hu/components/design-system/RadioButton/RadioButton';

type Props = {
  value: string;
  options: { value: string; label: string; helperText?: string }[];
};

const SingleChoiceReadonly: FC<Props> = ({ value, options }) => {
  return (
    <RadioGroup
      value={value}
      sx={{ gap: 2 }}
    >
      {options.map(option => (
        <HuCardContainer
          fullWidth
          key={option.value}
        >
          <HuRadioButton
            readOnly
            disabled
            label={option.label}
            description={option.helperText}
            value={option.value}
            isActive={value === option.value}
          />
        </HuCardContainer>
      ))}
    </RadioGroup>
  );
};

export default SingleChoiceReadonly;
