import { type FC } from 'react';

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

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

type Props = {
  questionResponse: CommentQuestion;
};

const CsatCommentQuestionResponse: FC<Props> = ({ questionResponse }) => {
  return (
    <Stack sx={{ gap: 2 }}>
      <Typography
        variant="globalS"
        fontWeight="fontWeightSemiBold"
        sx={{ color: ({ palette }) => palette.new.text.neutral.disabled }}
      >
        {questionResponse.title}
      </Typography>
      <Typography
        variant="globalS"
        sx={{
          color: ({ palette }) => palette.new.text.neutral.disabled,
        }}
      >
        {questionResponse.value}
      </Typography>
    </Stack>
  );
};

export default CsatCommentQuestionResponse;
