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

interface Props {
  buttonFlash: boolean;
}

export default function SideWidgetPreviewMobile({ buttonFlash }: Props) {
  return (
    <Box
      sx={[
        {
          position: "absolute",
          width: "calc(94 / 520 * 100%)",
          height: "calc(15 / 262 * 100%)",
          transitionProperty: "width, height, top, left",
          transitionDuration: "0.5s",
          transitionTimingFunction: "ease",
          top: "calc(214 / 262 * 100%)",
          left: "calc(422 / 520 * 100%)",
        },
      ]}
    >
      <Box
        sx={{
          width: "100%",
          height: "100%",
          overflow: "hidden",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: (theme) => theme.palette.brightPurple.main,
          containerType: "size",
          gap: "calc(5 / 196 * 100%)",
        }}
      >
        <Typography
          fontSize="30cqh"
          color="white"
        >
          Пройти квиз
        </Typography>
        {buttonFlash && <RunningStripe />}
      </Box>
    </Box>
  );
}
