import * as React from "react";
import type { IconProps, IconMetadata, IconComponent } from "../../types";

interface YouTubeProps extends IconProps {
  type?: "wordmark" | "icon";
}

export const YouTube: IconComponent<YouTubeProps> = React.forwardRef<
  SVGSVGElement,
  YouTubeProps
>(function YouTube(
  {
    color = "currentColor",
    fill,
    size = 24,
    strokeWidth,
    strokeLinecap,
    strokeLinejoin,
    strokeDasharray,
    opacity,
    className,
    type = "icon",
    ...props
  },
  forwardedRef,
) {
  if (type === "wordmark") {
    return (
      <svg
        width={size}
        height={size}
        viewBox="0 0 107 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className={className}
        strokeWidth={strokeWidth}
        strokeLinecap={strokeLinecap}
        strokeLinejoin={strokeLinejoin}
        strokeDasharray={strokeDasharray}
        opacity={opacity}
        {...props}
        ref={forwardedRef}
      >
        <g clipPath="url(#undefined-clip0_2041_109)">
          <path
            d="M33.409 3.74812C33.0159 2.27212 31.8613 1.11219 30.3922 0.717082C27.7323 0.000244355 17.0611 0.000244141 17.0611 0.000244141C17.0611 0.000244141 6.39005 0.000244355 3.73 0.717082C2.26094 1.11219 1.10647 2.27212 0.713222 3.74812C-0.000243927 6.42073 -0.000244141 12.0002 -0.000244141 12.0002C-0.000244141 12.0002 -0.000243927 17.5797 0.713222 20.2524C1.10647 21.7284 2.26094 22.8883 3.73 23.2833C6.39005 24.0002 17.0611 24.0002 17.0611 24.0002C17.0611 24.0002 27.7323 24.0002 30.3922 23.2833C31.8613 22.8883 33.0159 21.7284 33.409 20.2524C34.1226 17.5797 34.1226 12.0002 34.1226 12.0002C34.1226 12.0002 34.1197 6.42073 33.409 3.74812Z"
            fill="red"
          />
          <path
            d="M13.6458 17.1425L22.5107 12.0005L13.6458 6.8584V17.1425Z"
            fill="#fff"
          />
          <path
            d="M41.328 15.604 37.496 1.702H40.839L42.181 8.004C42.524 9.556 42.774 10.88 42.937 11.975H43.035C43.148 11.19 43.401 9.875 43.791 8.027L45.181 1.702H48.524L44.645 15.604V22.273H41.325V15.604H41.328ZM49.53 21.833C48.855 21.375 48.375 20.664 48.089 19.699 47.805 18.734 47.662 17.453 47.662 15.85V13.668C47.662 12.051 47.825 10.75 48.15 9.771 48.476 8.791 48.985 8.074 49.676 7.626 50.367 7.177 51.274 6.951 52.398 6.951 53.504 6.951 54.389 7.18 55.057 7.637 55.723 8.094 56.212 8.811 56.521 9.782 56.83 10.756 56.984 12.051 56.984 13.668V15.85C56.984 17.453 56.833 18.74 56.532 19.71 56.232 20.684 55.743 21.395 55.069 21.844 54.395 22.293 53.479 22.518 52.324 22.518 51.133 22.521 50.204 22.29 49.53 21.833ZM53.31 19.479C53.496 18.988 53.591 18.189 53.591 17.077V12.395C53.591 11.317 53.499 10.527 53.31 10.03 53.122 9.531 52.794 9.282 52.322 9.282 51.867 9.282 51.544 9.531 51.358 10.03 51.17 10.53 51.077 11.317 51.077 12.395V17.077C51.077 18.189 51.167 18.991 51.347 19.479 51.527 19.97 51.85 20.216 52.322 20.216 52.794 20.216 53.122 19.97 53.31 19.479ZM67.858 22.276H65.223L64.931 20.436H64.858C64.141 21.825 63.068 22.519 61.636 22.519 60.644 22.519 59.911 22.191 59.439 21.54 58.967 20.885 58.731 19.863 58.731 18.475V7.245H62.099V18.277C62.099 18.949 62.172 19.426 62.318 19.711 62.465 19.996 62.709 20.14 63.052 20.14 63.344 20.14 63.625 20.049 63.894 19.869 64.164 19.688 64.361 19.459 64.493 19.183V7.242H67.858V22.276Z"
            fill="currentColor"
          />
          <path
            d="M77.0065 4.42519H73.6639V22.2755H70.369V4.42519H67.0264V1.70459H77.0065V4.42519Z"
            fill="currentColor"
          />
          <path
            d="M85.13 22.276H82.495L82.203 20.436H82.13C81.414 21.825 80.341 22.519 78.908 22.519 77.916 22.519 77.183 22.191 76.711 21.54 76.24 20.885 76.004 19.863 76.004 18.475V7.245H79.372V18.277C79.372 18.949 79.445 19.426 79.591 19.711 79.737 19.996 79.981 20.14 80.324 20.14 80.616 20.14 80.897 20.049 81.166 19.869 81.436 19.688 81.633 19.459 81.765 19.183V7.242H85.13V22.276ZM96.276 9.647C96.071 8.698 95.742 8.012 95.287 7.586 94.832 7.16 94.205 6.949 93.408 6.949 92.79 6.949 92.211 7.123 91.675 7.476 91.138 7.829 90.722 8.289 90.43 8.862H90.405V.943H87.161V22.273H89.942L90.284 20.851H90.357C90.618 21.359 91.009 21.757 91.529 22.053 92.048 22.347 92.627 22.493 93.262 22.493 94.399 22.493 95.239 21.966 95.776 20.913 96.312 19.857 96.582 18.212 96.582 15.971V13.592C96.582 11.913 96.478 10.595 96.276 9.647ZM93.189 15.779C93.189 16.874 93.144 17.732 93.054 18.353 92.964 18.974 92.815 19.417 92.602 19.677 92.391 19.939 92.104 20.069 91.748 20.069 91.47 20.069 91.214 20.004 90.978 19.871 90.742 19.742 90.551 19.544 90.405 19.284V10.753C90.517 10.344 90.714 10.011 90.992 9.748 91.267 9.486 91.571 9.356 91.894 9.356 92.236 9.356 92.5 9.491 92.686 9.759 92.874 10.03 93.003 10.482 93.076 11.12 93.149 11.758 93.186 12.663 93.186 13.84V15.779H93.189ZM101.36 16.646C101.36 17.611 101.388 18.333 101.444 18.816 101.5 19.299 101.618 19.649 101.798 19.872 101.978 20.092 102.253 20.202 102.626 20.202 103.129 20.202 103.478 20.004 103.663 19.612 103.851 19.22 103.952 18.565 103.969 17.65L106.874 17.823C106.89 17.952 106.899 18.133 106.899 18.362 106.899 19.75 106.52 20.789 105.764 21.474 105.008 22.16 103.938 22.505 102.556 22.505 100.896 22.505 99.733 21.982 99.068 20.935 98.399 19.888 98.068 18.271 98.068 16.081V13.457C98.068 11.202 98.413 9.553 99.104 8.515 99.795 7.476 100.978 6.957 102.655 6.957 103.809 6.957 104.697 7.169 105.315 7.595 105.933 8.021 106.368 8.681 106.621 9.582 106.874 10.482 107 11.724 107 13.31V15.884H101.36V16.646ZM101.787 9.562C101.615 9.774 101.503 10.121 101.444 10.603 101.388 11.086 101.36 11.817 101.36 12.799V13.877H103.823V12.799C103.823 11.834 103.789 11.103 103.725 10.603 103.66 10.104 103.542 9.754 103.371 9.548 103.2 9.345 102.935 9.24 102.579 9.24 102.219 9.243 101.955 9.35 101.787 9.562Z"
            fill="currentColor"
          />
        </g>
        <defs>
          <clipPath id="undefined-clip0_2041_109">
            <path fill="#fff" d="M0 0H107V24H0z" />
          </clipPath>
        </defs>
      </svg>
    );
  }

  if (type === "icon") {
    return (
      <svg
        width={size}
        height={size}
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className={className}
        strokeWidth={strokeWidth}
        strokeLinecap={strokeLinecap}
        strokeLinejoin={strokeLinejoin}
        strokeDasharray={strokeDasharray}
        opacity={opacity}
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M23.47 6.49556C23.3323 6.0132 23.0638 5.57346 22.6911 5.22011C22.3185 4.86677 21.8547 4.61214 21.346 4.4816C19.4835 4 11.9878 4 11.9878 4C11.9878 4 4.49177 4.01458 2.62933 4.49618C2.1206 4.62673 1.65681 4.88137 1.28415 5.23473C0.911497 5.58809 0.642976 6.02786 0.505331 6.51022C-0.0580132 9.64782 -0.276545 14.4288 0.520799 17.4409C0.658459 17.9232 0.926986 18.363 1.29964 18.7163C1.6723 19.0697 2.13608 19.3243 2.6448 19.4548C4.50724 19.9364 12.0031 19.9364 12.0031 19.9364C12.0031 19.9364 19.4989 19.9364 21.3612 19.4548C21.87 19.3243 22.3338 19.0697 22.7064 18.7163C23.0791 18.363 23.3477 17.9233 23.4853 17.4409C24.0795 14.2988 24.2626 9.5208 23.47 6.49556Z"
          fill="red"
        />
        <path
          d="M9.60193 15.3831L15.8202 11.9682L9.60193 8.55322V15.3831Z"
          fill="#fff"
        />
      </svg>
    );
  }

  console.error(`YouTube doesn't support ${type}`);
  return null;
});

YouTube.displayName = "YouTube";

YouTube.metadata = {
  name: "YouTube",
  category: "wordmark/social",
  tags: ["you", "tube", "icon"],
  description: "YouTube icon from wordmark/social category",
  type: ["stroke", "icon"],
} as IconMetadata;

export default YouTube;