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

type Props = {
  checked?: boolean;
  sx?: SxProps;
};

export const TickOpenClose = ({ checked = false, sx }: Props) => {
  return (
    <Box
      sx={{
        transform: checked ? "" : "rotate(180deg)",
        transition: "transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
        width: "14px",
        height: "14px",
        transformOrigin: "center center",
        display: "flex",
        ...sx,
      }}
    >
      <svg
        width="14"
        height="13"
        viewBox="0 0 14 13"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M13 3.48425L7 9.48425"
          stroke="#7E2AEA"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M1 3.48425L7 9.48425"
          stroke="#7E2AEA"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </Box>
  );
};