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

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

export default function YoutobeIcon({ color, width }: Props) {
  return (
    <Box
      sx={{
        height: "75px",
        width: { width } || "120px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <svg
        width="120"
        height="75"
        viewBox="0 0 120 75"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_105_15)">
          <rect width="120" height="75" fill="none" />
          <g filter="url(#filter0_ddd_105_15)">
            <rect width="120" height="75" rx="12" fill="#FB5607" />
          </g>
          <path d="M84 37L48 16.2154V57.7846L84 37Z" fill="white" />
        </g>
        <defs>
          <filter
            id="filter0_ddd_105_15"
            x="-17.869"
            y="0"
            width="155.738"
            height="115.205"
            filterUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB"
          >
            <feFlood flood-opacity="0" result="BackgroundImageFix" />
            <feColorMatrix
              in="SourceAlpha"
              type="matrix"
              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
              result="hardAlpha"
            />
            <feOffset dy="6.6501" />
            <feGaussianBlur stdDeviation="2.66004" />
            <feColorMatrix
              type="matrix"
              values="0 0 0 0 0.494118 0 0 0 0 0.164706 0 0 0 0 0.917647 0 0 0 0.0282725 0"
            />
            <feBlend
              mode="normal"
              in2="BackgroundImageFix"
              result="effect1_dropShadow_105_15"
            />
            <feColorMatrix
              in="SourceAlpha"
              type="matrix"
              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
              result="hardAlpha"
            />
            <feOffset dy="12.5216" />
            <feGaussianBlur stdDeviation="5.00862" />
            <feColorMatrix
              type="matrix"
              values="0 0 0 0 0.494118 0 0 0 0 0.164706 0 0 0 0 0.917647 0 0 0 0.035 0"
            />
            <feBlend
              mode="normal"
              in2="effect1_dropShadow_105_15"
              result="effect2_dropShadow_105_15"
            />
            <feColorMatrix
              in="SourceAlpha"
              type="matrix"
              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
              result="hardAlpha"
            />
            <feOffset dy="22.3363" />
            <feGaussianBlur stdDeviation="8.93452" />
            <feColorMatrix
              type="matrix"
              values="0 0 0 0 0.494118 0 0 0 0 0.164706 0 0 0 0 0.917647 0 0 0 0.0417275 0"
            />
            <feBlend
              mode="normal"
              in2="effect2_dropShadow_105_15"
              result="effect3_dropShadow_105_15"
            />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="effect3_dropShadow_105_15"
              result="shape"
            />
          </filter>
          <clipPath id="clip0_105_15">
            <rect width="120" height="75" fill="white" />
          </clipPath>
        </defs>
      </svg>
    </Box>
  );
}
