import { Box, SxProps, Theme } from "@mui/material";

interface Props {
  sx?: SxProps<Theme>;
}

export default function RunningStripe({ sx = [] }: Props) {
  return (
    <Box
      component="span"
      sx={[
        {
          position: "absolute",
          height: "70px",
          width: "140px",
          background:
            "linear-gradient(0deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%)",
          animation: "runningStripe linear 3s infinite",
          transform: "rotate(-60deg)",
          "@keyframes runningStripe": {
            "0%": {
              left: "-150px",
              opacity: 1,
            },
            "25%, 100%": {
              left: "100%",
              opacity: 0,
            },
          },
        },
        ...(Array.isArray(sx) ? sx : [sx]),
      ]}
    />
  );
}