import QuizAnswerer from "@/components/QuizAnswerer";
import { ContainerWidgetComponentProps } from "@/model/widget/container";
import { Box, useMediaQuery } from "@mui/material";
import OpenQuizButton from "../button/OpenQuizButton";

export default function QuizContainer(props: ContainerWidgetComponentProps) {
  const { quizId, dimensions, showButtonOnMobile = false } = props;
  const isMobile = useMediaQuery("(max-width: 600px)");

  return showButtonOnMobile && isMobile ? (
    <OpenQuizButton {...props} />
  ) : (
    <Box
      sx={{
        width: dimensions?.width ?? "100%",
        maxWidth: "100%",
        height: dimensions?.height ?? "100%",
        maxHeight: "100%",
      }}
    >
      <QuizAnswerer quizId={quizId} changeFaviconAndTitle={false} disableGlobalCss />
    </Box>
  );
}
