import { type FC, useMemo } from 'react';

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

import HuFormRadioButtonGroup from '@material-hu/components/composed-components/RadioButtonGroup/form';

import { type SingleSelectionQuestion } from 'src/pages/dashboard/serviceManagement/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  question: SingleSelectionQuestion;
  name: string;
};

const CsatSingleChoiceQuestion: FC<Props> = ({ question, name }) => {
  const { t } = useLokaliseTranslation('service_management');

  const options = useMemo(() => {
    return question?.choices.map(choice => ({
      value: choice,
      label: choice,
    }));
  }, [question]);

  return (
    <Stack sx={{ gap: 2 }}>
      <Typography
        variant="globalS"
        fontWeight="fontWeightSemiBold"
      >
        {question.title}
      </Typography>
      <HuFormRadioButtonGroup
        name={name}
        options={options}
        rules={{
          required: question.required ? t('REQUIRED_QUESTION') : false,
        }}
        sx={{
          gap: 2,
        }}
      />
    </Stack>
  );
};

export default CsatSingleChoiceQuestion;
