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

interface Props {
  color: string;
  width: number;
}

export default function LikeIcon({ color, width }: Props) {
  return (
    <Box
      sx={{
        height: "30px",
        width: width + "px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <svg width={width} height={width} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M8 17H14V30H8C7.73478 30 7.48043 29.8946 7.29289 29.7071C7.10536 29.5196 7 29.2652 7 29V18C7 17.7348 7.10536 17.4804 7.29289 17.2929C7.48043 17.1054 7.73478 17 8 17V17Z"
          stroke={color}
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M14 17L19 7C20.0609 7 21.0783 7.42143 21.8284 8.17157C22.5786 8.92172 23 9.93913 23 11V14H30.7375C31.0211 13.9993 31.3015 14.0593 31.56 14.176C31.8185 14.2926 32.049 14.4632 32.2361 14.6764C32.4232 14.8895 32.5625 15.1402 32.6447 15.4116C32.7268 15.683 32.75 15.9689 32.7125 16.25L31.2125 28.25C31.1518 28.7317 30.918 29.1749 30.5546 29.4969C30.1912 29.8189 29.723 29.9977 29.2375 30H14"
          fill={color}
        />
        <path
          d="M14 17L19 7C20.0609 7 21.0783 7.42143 21.8284 8.17157C22.5786 8.92172 23 9.93913 23 11V14H30.7375C31.0211 13.9993 31.3015 14.0593 31.56 14.176C31.8185 14.2926 32.049 14.4632 32.2361 14.6764C32.4232 14.8895 32.5625 15.1402 32.6447 15.4116C32.7268 15.683 32.75 15.9689 32.7125 16.25L31.2125 28.25C31.1518 28.7317 30.918 29.1749 30.5546 29.4969C30.1912 29.8189 29.723 29.9977 29.2375 30H14"
          stroke={color}
          strokeWidth="1.6"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </Box>
  );
}