import * as variants from "./variants"

import type { IconProps } from "@/types/components/icon"

export default function CreditCardAddIcon({
  className,
  color,
  ...props
}: IconProps) {
  const classNames = variants.iconVariants({ className, color })
  return (
    <svg
      className={classNames}
      width="20"
      height="20"
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M3.4375 16.4792C3.00781 16.4792 2.63997 16.3262 2.33398 16.0202C2.02799 15.7142 1.875 15.3464 1.875 14.9167V5.0625C1.875 4.63281 2.02799 4.26497 2.33398 3.95898C2.63997 3.65299 3.00781 3.5 3.4375 3.5H16.5625C16.9922 3.5 17.36 3.65299 17.666 3.95898C17.972 4.26497 18.125 4.63281 18.125 5.0625V9.91667H3.4375V14.9167H10.8021C11.0174 14.9167 11.2014 14.9931 11.3542 15.1458C11.5069 15.2986 11.5833 15.4826 11.5833 15.6979C11.5833 15.9132 11.5069 16.0972 11.3542 16.25C11.2014 16.4028 11.0174 16.4792 10.8021 16.4792H3.4375ZM3.4375 6.77083H16.5625V5.0625H3.4375V6.77083ZM15.8854 15.7812H14.1667C13.9514 15.7812 13.7674 15.7049 13.6146 15.5521C13.4618 15.3993 13.3854 15.2153 13.3854 15C13.3854 14.7847 13.4618 14.6007 13.6146 14.4479C13.7674 14.2951 13.9514 14.2188 14.1667 14.2188H15.8854V12.5C15.8854 12.2847 15.9618 12.1007 16.1146 11.9479C16.2674 11.7951 16.4514 11.7188 16.6667 11.7188C16.8819 11.7188 17.066 11.7951 17.2188 11.9479C17.3715 12.1007 17.4479 12.2847 17.4479 12.5V14.2188H19.1667C19.3819 14.2188 19.566 14.2951 19.7188 14.4479C19.8715 14.6007 19.9479 14.7847 19.9479 15C19.9479 15.2153 19.8715 15.3993 19.7188 15.5521C19.566 15.7049 19.3819 15.7812 19.1667 15.7812H17.4479V17.5C17.4479 17.7153 17.3715 17.8993 17.2188 18.0521C17.066 18.2049 16.8819 18.2812 16.6667 18.2812C16.4514 18.2812 16.2674 18.2049 16.1146 18.0521C15.9618 17.8993 15.8854 17.7153 15.8854 17.5V15.7812Z"
        fill="#4D001B"
      />
    </svg>
  )
}