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

interface PaypalProps extends IconProps {
  type?: "symbols" | "icon";
}

export const Paypal: IconComponent<PaypalProps> = React.forwardRef<
  SVGSVGElement,
  PaypalProps
>(function Paypal(
  {
    color = "currentColor",
    fill,
    size = 24,
    strokeWidth,
    strokeLinecap,
    strokeLinejoin,
    strokeDasharray,
    opacity,
    className,
    type = "icon",
    ...props
  },
  forwardedRef,
) {
  if (type === "symbols") {
    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="M20.25 5.25H3.75C2.50736 5.25 1.5 6.25736 1.5 7.5V16.5C1.5 17.7426 2.50736 18.75 3.75 18.75H20.25C21.4926 18.75 22.5 17.7426 22.5 16.5V7.5C22.5 6.25736 21.4926 5.25 20.25 5.25Z"
          fill="#fff"
        />
        <path
          d="M3.7725 9.59399C3.72075 9.59399 3.6765 9.63149 3.66825 9.68324L3.0675 13.4947C3.05925 13.548 3.09525 13.5982 3.1485 13.6065C3.15375 13.6072 3.15825 13.608 3.1635 13.608H3.876C3.92775 13.608 3.972 13.5705 3.98025 13.5187L4.1565 12.3997C4.16475 12.3487 4.209 12.3105 4.26075 12.3105H4.90875C5.66625 12.3105 6.30825 11.7577 6.426 11.0092C6.5445 10.254 5.95425 9.59624 5.11875 9.59474H3.77175L3.7725 9.59399ZM4.4655 10.4445H4.98375C5.4105 10.4445 5.54925 10.6965 5.50575 10.9747C5.4615 11.2537 5.24625 11.4592 4.833 11.4592H4.305L4.4655 10.4445ZM7.8765 10.7032C7.6965 10.7032 7.4895 10.7407 7.257 10.8375C6.72375 11.0595 6.46725 11.5192 6.3585 11.8537C6.3585 11.8537 6.012 12.8752 6.79425 13.437C6.79425 13.437 7.5195 13.9777 8.33625 13.404L8.322 13.4932C8.31375 13.5465 8.34975 13.5967 8.403 13.605C8.40825 13.6057 8.41275 13.6065 8.418 13.6065H9.0945C9.14625 13.6065 9.1905 13.569 9.19875 13.5172L9.6105 10.9072C9.61875 10.854 9.58275 10.8037 9.5295 10.7955C9.52425 10.7947 9.51975 10.794 9.5145 10.794H8.838C8.78625 10.794 8.742 10.8315 8.73375 10.8832L8.712 11.0235C8.712 11.0235 8.4165 10.7017 7.8765 10.7032ZM7.89825 11.5275C7.97625 11.5275 8.04675 11.538 8.1105 11.559C8.40225 11.6527 8.568 11.9332 8.52 12.237C8.46075 12.6112 8.154 12.8872 7.76025 12.8872C7.683 12.8872 7.61175 12.8767 7.548 12.8557C7.25625 12.762 7.08975 12.4815 7.13775 12.1777C7.197 11.8035 7.5045 11.5275 7.89825 11.5275Z"
          fill="#003087"
        />
        <path
          d="M13.5165 9.59399C13.4648 9.59399 13.4205 9.63149 13.4123 9.68324L12.8115 13.4947C12.8033 13.548 12.8393 13.5982 12.8925 13.6065C12.8978 13.6072 12.9023 13.608 12.9075 13.608H13.62C13.6718 13.608 13.716 13.5705 13.7243 13.5187L13.9005 12.3997C13.9088 12.3487 13.953 12.3105 14.0048 12.3105H14.6528C15.4103 12.3105 16.0523 11.7577 16.17 11.0092C16.2885 10.254 15.699 9.59624 14.8628 9.59474H13.5158L13.5165 9.59399ZM14.2095 10.4445H14.7278C15.1545 10.4445 15.2933 10.6965 15.2498 10.9747C15.2055 11.2537 14.9903 11.4592 14.577 11.4592H14.049L14.2095 10.4445ZM17.6205 10.7032C17.4405 10.7032 17.2335 10.7407 17.001 10.8375C16.4678 11.0595 16.2113 11.5192 16.1025 11.8537C16.1025 11.8537 15.7568 12.8752 16.5383 13.437C16.5383 13.437 17.2635 13.9777 18.0803 13.404L18.066 13.4932C18.0578 13.5465 18.0938 13.5967 18.147 13.605C18.1523 13.6057 18.1568 13.6065 18.162 13.6065H18.8385C18.8903 13.6065 18.9345 13.569 18.9428 13.5172L19.3545 10.9072C19.3628 10.854 19.3268 10.8037 19.2735 10.7955C19.2683 10.7947 19.263 10.794 19.2585 10.794H18.582C18.5303 10.794 18.486 10.8315 18.4778 10.8832L18.456 11.0235C18.456 11.0235 18.1605 10.7017 17.6205 10.7032ZM17.6423 11.5275C17.7203 11.5275 17.7908 11.538 17.8545 11.559C18.1463 11.6527 18.312 11.9332 18.264 12.237C18.2048 12.6112 17.898 12.8872 17.5043 12.8872C17.427 12.8872 17.3558 12.8767 17.292 12.8557C17.0003 12.762 16.8338 12.4815 16.8818 12.1777C16.941 11.8035 17.2485 11.5275 17.6423 11.5275Z"
          fill="#0070e0"
        />
        <path
          d="M9.93225 10.7954C9.87825 10.7954 9.84075 10.8479 9.8565 10.8989L10.5983 13.2007L9.92775 14.2852C9.8955 14.3377 9.933 14.4059 9.99525 14.4059H10.788C10.8338 14.4059 10.8765 14.3819 10.9005 14.3422L12.972 10.9154C13.0035 10.8629 12.966 10.7954 12.9045 10.7954H12.1118C12.0653 10.7954 12.0218 10.8202 11.9985 10.8599L11.1833 12.2369L10.7693 10.8704C10.7558 10.8262 10.7145 10.7954 10.668 10.7954H9.93225Z"
          fill="#003087"
        />
        <path
          d="M20.1233 9.59399C20.0715 9.59399 20.0273 9.63149 20.019 9.68324L19.4175 13.4947C19.4093 13.548 19.4453 13.5982 19.4985 13.6065C19.5038 13.6072 19.509 13.608 19.5135 13.608H20.226C20.2778 13.608 20.322 13.5705 20.3303 13.5187L20.931 9.70724C20.9393 9.65399 20.9033 9.60374 20.85 9.59549C20.8448 9.59474 20.8403 9.59399 20.835 9.59399H20.1233Z"
          fill="#0070e0"
        />
      </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}
      >
        <g clipPath="url(#undefined-clip0_2066_1221)">
          <path
            d="M19.0587 5.52C19.0587 8.4928 16.3043 12 12.1368 12H8.12247L7.92542 13.2384L6.98889 19.2H2L5.00126 0H13.0841C15.8058 0 17.9471 1.51093 18.7358 3.61067C18.9633 4.22116 19.0729 4.86898 19.0587 5.52Z"
            fill="#002991"
          />
          <path
            d="M21.9341 11.04C21.6679 12.6514 20.8345 14.1159 19.5833 15.1712C18.332 16.2266 16.7445 16.804 15.1049 16.8H12.3173L11.1569 24H6.19479L6.98888 19.2L7.92594 13.2384L8.12245 12H12.1368C16.299 12 19.0587 8.49282 19.0587 5.52002C21.1069 6.57282 22.3009 8.70029 21.9341 11.04Z"
            fill="#60cdff"
          />
          <path
            d="M19.0587 5.52005C18.1999 5.07258 17.1584 4.80005 16.0248 4.80005H9.25657L8.12247 12H12.1368C16.299 12 19.0587 8.49285 19.0587 5.52005Z"
            fill="#008cff"
          />
        </g>
        <defs>
          <clipPath id="undefined-clip0_2066_1221">
            <path fill="#fff" transform="translate(2)" d="M0 0H20V24H0z" />
          </clipPath>
        </defs>
      </svg>
    );
  }

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

Paypal.displayName = "Paypal";

Paypal.metadata = {
  name: "Paypal",
  category: "symbols/cards",
  tags: ["paypal", "icon"],
  description: "Paypal icon from symbols/cards category",
  type: ["stroke", "icon"],
} as IconMetadata;

export default Paypal;