frontAnswerer/lib/components/ViewPublicationPage/questions/Page/index.tsx

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",
                }}
                onClick={(event) => event.preventDefault()}
              >
                <img
                  key={currentQuestion.id}
                  src={currentQuestion.content.back}
                  alt=""
                  style={{
                    display: "block",
                    width: "100%",
                    height: "100%",
                    objectFit: "contain",
                  }}
                />
              </Box>
            )
          : currentQuestion.content.video && (
              <QuizVideo
                containerSX={{
                  width: "100%",
                  height: "calc(100% - 270px)",
                  maxHeight: "80%",
                  objectFit: "contain",
                  aspectRatio: "16 / 9",
                }}
                videoUrl={currentQuestion.content.video}
              />
            )}
      </Box>
    </Box>
  );
};