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

interface Props {
  fixedSide: "left" | "right";
  buttonBackgroundColor: string;
  buttonTextColor: string;
}

export default function ButtonWidgetPreviewMobile({ buttonBackgroundColor, fixedSide, buttonTextColor }: Props) {
  return (
    <Box
      sx={[
        {
          position: "absolute",
          width: "calc(22 / 520 * 100%)",
          height: "calc(22 / 262 * 100%)",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: buttonBackgroundColor,
          borderRadius: "50%",
          transitionProperty: "width, height, top, left",
          transitionDuration: "0.5s",
          transitionTimingFunction: "ease",
        },
        fixedSide === "left" && {
          top: "calc(88%)",
          left: "calc(82%)",
        },
        fixedSide === "right" && {
          top: "calc(88%)",
          left: "calc(94%)",
        },
      ]}
    >
      <TaskIcon
        sx={{
          width: "auto",
          height: "calc(80%)",
          aspectRatio: 1,
          color: buttonTextColor,
        }}
      />
    </Box>
  );
}
