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

export const GooglePay: IconComponent = React.forwardRef<
  SVGSVGElement,
  IconProps
>(function GooglePay(
  {
    color = "currentColor",
    fill,
    size = 24,
    strokeWidth,
    strokeLinecap,
    strokeLinejoin,
    strokeDasharray,
    opacity,
    className,
    ...props
  },
  forwardedRef,
) {
  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="M11.173 12.098V14.19H10.498V9.017H12.252C12.68 9.017 13.085 9.174 13.4 9.466 13.714 9.736 13.872 10.141 13.872 10.569 13.872 10.996 13.714 11.378 13.4 11.671 13.085 11.963 12.702 12.121 12.252 12.121L11.173 12.098ZM11.173 9.646V11.446H12.297C12.545 11.446 12.792 11.356 12.95 11.176 13.309 10.838 13.309 10.276 12.972 9.939L12.95 9.916C12.77 9.736 12.545 9.624 12.297 9.646L11.173 9.646ZM15.424 10.546C15.919 10.546 16.301 10.681 16.593 10.951 16.886 11.221 17.021 11.581 17.021 12.031V14.19H16.391V13.695H16.369C16.099 14.1 15.716 14.303 15.266 14.303 14.884 14.303 14.547 14.19 14.277 13.965 14.029 13.74 13.872 13.425 13.872 13.088 13.872 12.728 14.007 12.436 14.277 12.211 14.547 11.986 14.929 11.896 15.379 11.896 15.784 11.896 16.099 11.963 16.346 12.121V11.963C16.346 11.738 16.256 11.513 16.076 11.378 15.896 11.221 15.671 11.131 15.424 11.131 15.042 11.131 14.749 11.288 14.547 11.603L13.962 11.243C14.322 10.771 14.794 10.546 15.424 10.546ZM14.569 13.11C14.569 13.29 14.659 13.448 14.794 13.538 14.952 13.65 15.132 13.718 15.311 13.718 15.581 13.718 15.851 13.605 16.054 13.403 16.279 13.2 16.391 12.953 16.391 12.683 16.189 12.526 15.896 12.436 15.514 12.436 15.244 12.436 15.019 12.503 14.839 12.638 14.659 12.751 14.569 12.908 14.569 13.11ZM20.665 10.658 18.438 15.764H17.763L18.595 13.987 17.133 10.681H17.853L18.91 13.223H18.933L19.968 10.681H20.665L20.665 10.658Z"
        fill="#5f6368"
      />
      <path
        d="M9.1743 11.6483C9.1743 11.4459 9.1518 11.2434 9.1293 11.041H6.3177V12.1881H7.91467C7.84717 12.5481 7.64475 12.8854 7.32982 13.0878V13.8301H8.29702C8.85937 13.3128 9.1743 12.548 9.1743 11.6483Z"
        fill="#4285f4"
      />
      <path
        d="M6.3177 14.5498C7.12747 14.5498 7.80225 14.2799 8.2971 13.83L7.3299 13.0878C7.05997 13.2677 6.72263 13.3802 6.3177 13.3802C5.55292 13.3802 4.87815 12.8628 4.65322 12.1431H3.66352V12.9078C4.18087 13.92 5.19307 14.5498 6.3177 14.5498Z"
        fill="#34a853"
      />
      <path
        d="M4.65323 12.1431C4.5183 11.7832 4.5183 11.3783 4.65323 10.996V10.2312H3.66353C3.23618 11.0635 3.23618 12.0531 3.66353 12.9079L4.65323 12.1431Z"
        fill="#fbbc04"
      />
      <path
        d="M6.3177 9.78143C6.74505 9.78143 7.14998 9.93886 7.46483 10.2313L8.31953 9.37658C7.77968 8.88173 7.0599 8.58931 6.34013 8.61181C5.2155 8.61181 4.1808 9.24158 3.68595 10.2538L4.67565 11.0186C4.87808 10.2988 5.55293 9.78143 6.3177 9.78143Z"
        fill="#ea4335"
      />
    </svg>
  );
});

GooglePay.displayName = "GooglePay";

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

export default GooglePay;