import { type FC } from 'react';

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

import HuFormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';

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

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

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

  return (
    <Stack sx={{ gap: 2 }}>
      <Typography
        variant="globalS"
        fontWeight="fontWeightSemiBold"
        sx={{ color: ({ palette }) => palette.new.text.neutral.default }}
      >
        {question.title}
      </Typography>
      <HuFormInputClassic
        inputProps={{
          placeholder: question.required ? t('comment') : t('comment_optional'),
          multiline: true,
          hasCounter: false,
          maxLength: 62000, // Same limit as in the backend - practically unlimited
        }}
        rules={{
          required: question.required ? t('required_question') : false,
        }}
        name={name}
      />
    </Stack>
  );
};

export default CsatCommentQuestion;
