import { Box, Typography, useTheme } from "@mui/material";
import type { QuizQuestionPage } from "@model/questionTypes/page";
import QuizVideo from "@/ui_kit/VideoIframe/VideoIframe";

type PageProps = {
  currentQuestion: QuizQuestionPage;
};

export const Page = ({ currentQuestion }: PageProps) => {
  const theme = useTheme();

  return (
    <Box>
      <Typography
        variant="h5"
        sx={{
          paddingBottom: "25px",
          color: theme.palette.text.primary,
          wordBreak: "break-word",
        }}
      >
        {currentQuestion.title}
      </Typography>
      <Typography color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>
        {currentQuestion.content.text}
      </Typography>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          width: "100%",
          marginTop: "20px",
        }}
      >
        {currentQuestion.content.useImage ? (
          currentQuestion.content.back && (
            <Box
              sx={{
                borderRadius: "12px",
                border: "1px solid #9A9AAF",
                overflow: "hidden",
              }}
            >
              <img
                key={currentQuestion.id}
                src={currentQuestion.content.back}
                alt=""
                style={{
                  display: "block",
                  width: "100%",
                  height: "100%",
                  objectFit: "contain",
                }}
              />
            </Box>
          )
        ) : (
          <QuizVideo
            containerSX={{
              width: "100%",
              height: "calc(100% - 270px)",
              maxHeight: "80%",
              objectFit: "contain",
              aspectRatio: "16 / 9",
            }}
            videoUrl={currentQuestion.content.video}
          />
        )}
      </Box>
    </Box>
  );
};