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

import type { QuizQuestionPage } from "model/questionTypes/page";

interface Props {
  question: QuizQuestionPage;
}

export default function Page({ question }: Props) {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "start",
        gap: 1,
      }}
    >
      <Typography variant="h6" data-cy="question-title">{question.title}</Typography>
      <Typography data-cy="question-text">{question.content.text}</Typography>
      {question.content.picture && (
        <img
          src={question.content.picture}
          alt=""
          style={{
            width: "100%",
            display: "block",
            objectFit: "scale-down",
            flexGrow: 1,
          }}
        />
      )}
    </Box>
  );
}
