import { Box, Typography } from "@mui/material";

import CustomTextField from "@ui_kit/CustomTextField";

import type { QuizQuestionText } from "model/questionTypes/text";

interface Props {
  question: QuizQuestionText;
}

export default function Text({ question }: Props) {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        gap: 1,
      }}
    >
      <Typography variant="h6" data-cy="question-title">{question.title}</Typography>
      <CustomTextField placeholder={question.content.placeholder} />
    </Box>
  );
}
