import type { QuizQuestionDate } from "@model/questionTypes/date";
import DateRange from "./DateRange";
import DatePicker from "./DatePicker";
import { Box, Typography, useTheme } from "@mui/material";

type DateProps = {
  currentQuestion: QuizQuestionDate;
};

export const Date = ({ currentQuestion }: DateProps) => {
  const theme = useTheme();

  return (
    <Box>
      <Typography
        variant="h5"
        color={theme.palette.text.primary}
        sx={{ wordBreak: "break-word" }}
      >
        {currentQuestion.title}
      </Typography>
      {currentQuestion.content.isRange ? (
        <DateRange currentQuestion={currentQuestion} />
      ) : (
        <DatePicker currentQuestion={currentQuestion} />
      )}
    </Box>
  );
};