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

import YoutubeEmbedIframe from "@/components/ViewPublicationPage/tools/YoutubeEmbedIframe";

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

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 ? (
          <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>
        ) : (
          <YoutubeEmbedIframe
            containerSX={{
              width: "100%",
              height: "calc(100% - 270px)",
              maxHeight: "80%",
              objectFit: "contain",
            }}
            videoUrl={currentQuestion.content.video}
          />
        )}
      </Box>
    </Box>
  );
};