import { iconVariants } from "./variants"

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

export default function CoffeeIcon({ className, color, ...props }: IconProps) {
  const classNames = iconVariants({ className, color })
  return (
    <svg
      className={classNames}
      fill="none"
      height="20"
      viewBox="0 0 20 20"
      width="20"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M4.32422 17.2918C4.10894 17.2918 3.92491 17.2154 3.77214 17.0627C3.61936 16.9099 3.54297 16.7259 3.54297 16.5106C3.54297 16.2953 3.61936 16.1113 3.77214 15.9585C3.92491 15.8057 4.10894 15.7293 4.32422 15.7293H15.6784C15.8937 15.7293 16.0777 15.8057 16.2305 15.9585C16.3832 16.1113 16.4596 16.2953 16.4596 16.5106C16.4596 16.7259 16.3832 16.9099 16.2305 17.0627C16.0777 17.2154 15.8937 17.2918 15.6784 17.2918H4.32422ZM6.7513 14.1668C5.86241 14.1668 5.10547 13.8543 4.48047 13.2293C3.85547 12.6043 3.54297 11.8474 3.54297 10.9585V4.271C3.54297 3.8413 3.69596 3.47346 4.00195 3.16748C4.30793 2.86149 4.67577 2.7085 5.10547 2.7085H16.5638C16.9935 2.7085 17.3613 2.86149 17.6673 3.16748C17.9733 3.47346 18.1263 3.8413 18.1263 4.271V6.97933C18.1263 7.40902 17.9733 7.77686 17.6673 8.08285C17.3613 8.38884 16.9935 8.54183 16.5638 8.54183H14.793V10.9612C14.793 11.8483 14.478 12.6043 13.8481 13.2293C13.2181 13.8543 12.4609 14.1668 11.5763 14.1668H6.7513ZM6.7513 12.6043H11.5742C12.0256 12.6043 12.4145 12.4432 12.7409 12.1209C13.0673 11.7986 13.2305 11.4111 13.2305 10.9585V4.271H5.10547V10.9585C5.10547 11.4111 5.26662 11.7986 5.58893 12.1209C5.91125 12.4432 6.2987 12.6043 6.7513 12.6043ZM14.793 6.97933H16.5638V4.271H14.793V6.97933ZM6.7513 12.6043H5.10547H13.2305H6.7513Z"
        fill="#57514E"
      />
    </svg>
  )
}
