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

import type { QuizStartpageType } from "@model/settingsData";

type StartPageMobileProps = {
  quizHeaderBlock: JSX.Element;
  quizMainBlock: JSX.Element;
  backgroundBlock: JSX.Element | null;
  startpageType: QuizStartpageType;
};

export const StartPageMobile = ({
  quizHeaderBlock,
  quizMainBlock,
  backgroundBlock,
  startpageType,
}: StartPageMobileProps) => {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column-reverse",
        flexGrow: 1,
        justifyContent: "flex-end",
        minHeight: "100vh",
        height: "100%",
        "&::-webkit-scrollbar": { width: 0 },
      }}
    >
      <Box
        sx={{
          width: "100%",
          display: "flex",
          flexGrow: 1,
          flexDirection: "column",
          justifyContent: "space-between",
          alignItems: "flex-start",
          p: "25px",
          height: "100%",
          overflowY: "auto",
          overflowX: "hidden",
          "&::-webkit-scrollbar": {
            width: "4px",
          },
          "&::-webkit-scrollbar-thumb": {
            backgroundColor: "#b8babf",
          },
        }}
      >
        {quizHeaderBlock}
        <Box
          sx={{
            height: "80%",
            display: "flex",
            flexGrow: 1,
            flexDirection: "column",
            justifyContent: "space-between",
            width: "100%",
          }}
        >
          {quizMainBlock}
        </Box>
      </Box>
      <Box
        sx={{
          width: "100%",
          overflow: "hidden",
        }}
      >
        {backgroundBlock}
      </Box>
    </Box>
  );
};