import { type FC } from 'react';

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

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

import HugoNumberRating from './HugoNumberRating';

type Props = {
  questionResponse: RatingQuestion;
};

const CsatRatingQuestionResponse: FC<Props> = ({ questionResponse }) => {
  const { t } = useLokaliseTranslation('service_management');

  return (
    <Stack sx={{ gap: 2 }}>
      <Typography
        variant="globalS"
        fontWeight="fontWeightSemiBold"
        sx={{
          color: ({ palette }) => palette.new.text.neutral.disabled,
        }}
      >
        {questionResponse.title}
      </Typography>
      <HugoNumberRating
        disableForm
        value={Number(questionResponse.value)}
        max={questionResponse.maxChoice}
        lowHelperText={t('csat_rating_low_helper')}
        highHelperText={t('csat_rating_high_helper')}
      />
    </Stack>
  );
};

export default CsatRatingQuestionResponse;
