import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuRadioButton from '@material-hu/components/design-system/RadioButton/RadioButton';
import HuTitle from '@material-hu/components/design-system/Title';

type RequestEditionReasonOption = {
  value: number;
  label: string;
};

type RequestEditionDrawerContentProps = {
  description: string;
  reasonTitle: string;
  options: RequestEditionReasonOption[];
  selectedReason: number | null;
  onReasonChange: (value: number | null) => void;
};

const RequestEditionDrawerContent = ({
  description,
  reasonTitle,
  options,
  selectedReason,
  onReasonChange,
}: RequestEditionDrawerContentProps) => {
  return (
    <Stack sx={{ gap: 3 }}>
      <Typography variant="body1">{description}</Typography>
      <Divider />

      <Stack sx={{ gap: 2 }}>
        <HuTitle
          title={reasonTitle}
          variant="S"
        />
        {options.map(option => (
          <HuRadioButton
            key={option.value}
            label={option.label}
            isActive={selectedReason === option.value}
            onClick={isActive => onReasonChange(isActive ? option.value : null)}
          />
        ))}
      </Stack>
    </Stack>
  );
};

export default RequestEditionDrawerContent;