import { type FC } from 'react';

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

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

import SingleChoiceReadonly from './SingleChoiceReadonly';

type Props = {
  questionResponse: SingleSelectionQuestion;
};

const CsatSingleChoiceQuestionResponse: FC<Props> = ({ questionResponse }) => {
  return (
    <Stack sx={{ gap: 2 }}>
      <Typography
        variant="globalS"
        fontWeight="fontWeightSemiBold"
        sx={{
          color: ({ palette }) => palette.new.text.neutral.disabled,
        }}
      >
        {questionResponse.title}
      </Typography>
      <SingleChoiceReadonly
        value={questionResponse.value!}
        options={questionResponse.choices.map(choice => ({
          value: choice,
          label: choice,
        }))}
      />
    </Stack>
  );
};

export default CsatSingleChoiceQuestionResponse;
