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

export const ApplePay: IconComponent = React.forwardRef<
  SVGSVGElement,
  IconProps
>(function ApplePay(
  {
    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="#e6e6e6"
      />
      <path
        d="M6.635 9.66C6.838 9.406 6.976 9.065 6.94 8.716 6.642 8.731 6.28 8.912 6.07 9.167 5.881 9.384 5.714 9.74 5.758 10.074 6.091 10.103 6.425 9.907 6.635 9.66ZM6.936 10.139C6.451 10.11 6.039 10.414 5.808 10.414 5.576 10.414 5.222 10.153 4.838 10.161 4.34 10.168 3.877 10.45 3.623 10.899 3.103 11.796 3.486 13.128 3.992 13.859 4.238 14.22 4.535 14.619 4.925 14.604 5.294 14.59 5.439 14.365 5.887 14.365 6.336 14.365 6.466 14.604 6.856 14.597 7.262 14.59 7.515 14.235 7.761 13.873 8.043 13.461 8.158 13.063 8.165 13.041 8.158 13.034 7.384 12.737 7.377 11.847 7.37 11.101 7.985 10.747 8.014 10.725 7.667 10.211 7.124 10.153 6.936 10.139ZM11.156 9.13C12.209 9.13 12.943 9.856 12.943 10.913 12.943 11.974 12.194 12.704 11.13 12.704H9.963V14.559H9.121V9.13H11.156ZM9.963 11.997H10.93C11.664 11.997 12.081 11.602 12.081 10.917 12.081 10.233 11.664 9.841 10.934 9.841H9.963L9.963 11.997ZM13.163 13.434C13.163 12.742 13.694 12.317 14.634 12.264L15.718 12.2V11.895C15.718 11.455 15.42 11.192 14.924 11.192 14.454 11.192 14.16 11.417 14.089 11.771H13.321C13.366 11.056 13.976 10.53 14.954 10.53 15.913 10.53 16.526 11.037 16.526 11.831V14.559H15.748V13.908H15.729C15.499 14.348 14.999 14.627 14.48 14.627 13.705 14.627 13.163 14.145 13.163 13.434ZM15.718 13.077V12.764L14.743 12.825C14.258 12.858 13.983 13.073 13.983 13.412 13.983 13.758 14.269 13.983 14.706 13.983 15.274 13.983 15.718 13.592 15.718 13.077ZM17.262 16.015V15.357C17.322 15.372 17.457 15.372 17.525 15.372 17.901 15.372 18.104 15.214 18.228 14.807 18.228 14.8 18.3 14.567 18.3 14.563L16.87 10.601H17.751L18.752 13.822H18.766L19.767 10.601H20.625L19.143 14.766C18.804 15.725 18.413 16.034 17.593 16.034 17.525 16.034 17.322 16.026 17.262 16.015Z"
        fill="#1a1a1a"
      />
    </svg>
  );
});

ApplePay.displayName = "ApplePay";

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

export default ApplePay;