import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import CardContainer from '@material-hu/components/design-system/CardContainer';

import { type AnswerResult } from 'src/pages/dashboard/learning/courses/types';

type TextAnswerProps = {
  answer: AnswerResult;
};

const TextAnswer = ({ answer }: TextAnswerProps) => {
  const { palette } = useTheme();

  return (
    <CardContainer
      sx={{
        width: '100%',
        borderColor: palette.new.border.neutral.default,
        backgroundColor: palette.new.background.elements.default,
      }}
    >
      <Typography
        variant="globalS"
        sx={{
          color: palette.new.text.neutral.default,
        }}
      >
        {answer.answer}
      </Typography>
    </CardContainer>
  );
};

export default TextAnswer;
