import { SVGProps } from "react";

interface IPlayPauseButtonProps {
  state?: "play" | "pause";
}

function PlayPauseButton({
  state = "play",
  ...props
}: IPlayPauseButtonProps & SVGProps<SVGSVGElement>) {
  return (
    <svg
      width="71"
      height="50"
      viewBox="0 0 71 50"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <g filter="url(#filter0_b_201_4)">
        <rect width="71" height="50" rx="8" fill="#4D4D4D" fillOpacity="0.88" />
      </g>
      {state === "play" && (
        <path
          d="M43.5 24.134C44.1667 24.5189 44.1667 25.4811 43.5 25.866L31.5 32.7942C30.8333 33.1791 30 32.698 30 31.9282L30 18.0718C30 17.302 30.8333 16.8209 31.5 17.2058L43.5 24.134Z"
          fill="#DADADA"
        />
      )}
      {state === "pause" && (
        <>
          <rect x="27" y="17" width="5" height="16" rx="2" fill="#D9D9D9" />
          <rect x="39" y="17" width="5" height="16" rx="2" fill="#D9D9D9" />
        </>
      )}
      <defs>
        <filter
          id="filter0_b_201_4"
          x="-6.7"
          y="-6.7"
          width="84.4"
          height="63.4"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feGaussianBlur in="BackgroundImageFix" stdDeviation="3.35" />
          <feComposite
            in2="SourceAlpha"
            operator="in"
            result="effect1_backgroundBlur_201_4"
          />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_backgroundBlur_201_4"
            result="shape"
          />
        </filter>
      </defs>
    </svg>
  );
}

export default PlayPauseButton;
