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

interface Props {
  position: "left" | "right";
  buttonFlash: boolean;
  text: string;
}

export default function SideWidgetPreviewDesktop({ buttonFlash, position, text }: Props) {
  return (
    <Box
      sx={[
        {
          position: "absolute",
          width: "calc(196 / 520 * 100%)",
          height: "calc(30 / 262 * 100%)",
          transitionProperty: "width, height, top, left",
          transitionDuration: "0.5s",
          transitionTimingFunction: "ease",
        },
        position === "left" && {
          top: "calc(178 / 262 * 100%)",
          left: "calc(50.6 / 520 * 100%)",
        },
        position === "right" && {
          top: "calc(178 / 262 * 100%)",
          left: "calc(190 / 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%)",
          borderRadius: "4px",
        }}
      >
        <Typography
          fontSize="40cqh"
          color="white"
        >
          { text || "Пройти квиз" }
        </Typography>
        {buttonFlash && <RunningStripe />}
      </Box>
    </Box>
  );
}
