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

interface Props {
  right: boolean;
}

export default function ArrowLeftSP({ right }: Props) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        height: "14px",
        width: "19px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        transform: right ? "rotate(180deg)" : undefined,
      }}
    >
      <svg
        width="13"
        height="11"
        viewBox="0 0 13 11"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M8.12 10.808H5.24L0.855999 5.88L5.24 0.952H8.12L4.648 4.936H12.184V6.824H4.648L8.12 10.808Z"
          fill={theme.palette.brightPurple.main}
        />
      </svg>
    </Box>
  );
}