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

interface Props {
  buttonBackgroundColor: string;
  rounded: boolean;
  withShadow: boolean;
  fixedSide: "left" | "right";
  buttonTextColor: string;
  buttonText: string;
  buttonFlash: boolean;
}

export default function ButtonWidgetPreviewDesktop({
  buttonBackgroundColor,
  buttonFlash,
  buttonText,
  buttonTextColor,
  fixedSide,
  rounded,
  withShadow,
}: Props) {
  return (
    <Box
      sx={[
        {
          position: "absolute",
          height: "calc(20 / 262 * 100%)",
          aspectRatio: 3.69,
          px: "calc(1%)",
          display: "flex",
          alignItems: "center",
          backgroundColor: buttonBackgroundColor,
          borderRadius: rounded ? "30px" : 0,
          transform: "rotate(-90deg)",
          transformOrigin: "left",
          transitionProperty: "width, height, top, left",
          transitionDuration: "0.5s",
          transitionTimingFunction: "ease",
          whiteSpace: "nowrap",
          overflow: "hidden",
          boxShadow: withShadow ? "2px 5px 20px 2px rgba(25, 6, 50, 0.4), 0 2px 10px 0 rgba(35, 17, 58, 0.1)" : "none",
        },
        fixedSide === "left" && {
          top: "calc(57%)",
          left: "calc(55 / 520 * 100%)",
        },
        fixedSide === "right" && {
          top: "calc(57%)",
          left: "calc(383 / 520 * 100%)",
        },
      ]}
    >
      <TaskIcon
        sx={{
          width: "auto",
          height: "calc(18.57 / 29.5 * 100%)",
          aspectRatio: 1,
          color: buttonTextColor,
        }}
      />
      <Typography
        fontSize="calc(3cqh)"
        lineHeight="120%"
        ml="3px"
        color={buttonTextColor}
      >
        {buttonText || "Пройти тест"}
      </Typography>
      {buttonFlash && <RunningStripe />}
    </Box>
  );
}
