import { iconVariants } from "./variants"

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

export default function KettleIcon({ className, color, ...props }: IconProps) {
  const classNames = iconVariants({ className, color })
  return (
    <svg
      className={classNames}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      {...props}
    >
      <path
        d="M6.1875 17.0625V6.1L4.425 3.75C4.19167 3.44167 4.16082 3.11458 4.33245 2.76875C4.50408 2.42292 4.78493 2.25 5.175 2.25H15.7625C16.3411 2.25 16.8336 2.45328 17.2402 2.85983C17.6467 3.26638 17.85 3.75893 17.85 4.3375V5.1875H19.8875C20.4031 5.1875 20.8445 5.37109 21.2117 5.73828C21.5789 6.10546 21.7625 6.54687 21.7625 7.0625V12.125C21.7625 12.6406 21.5789 13.082 21.2117 13.4492C20.8445 13.8164 20.4031 14 19.8875 14H17.85V17.0625C17.85 17.5781 17.6664 18.0195 17.2992 18.3867C16.932 18.7539 16.4906 18.9375 15.975 18.9375H8.0625C7.54687 18.9375 7.10546 18.7539 6.73828 18.3867C6.37109 18.0195 6.1875 17.5781 6.1875 17.0625ZM8.0625 17.0625H15.975V4.125H7.05L8.0625 5.45V17.0625ZM17.85 12.125H19.8875V7.0625H17.85V12.125ZM13.6125 5.0625C13.2132 5.0625 12.8738 5.20104 12.5943 5.47813C12.3148 5.75521 12.175 6.09167 12.175 6.4875V14.7C12.175 15.0958 12.3148 15.4323 12.5945 15.7094C12.8741 15.9865 13.2137 16.125 13.6132 16.125C14.0127 16.125 14.35 15.9865 14.625 15.7094C14.9 15.4323 15.0375 15.0958 15.0375 14.7V6.4875C15.0375 6.09167 14.899 5.75521 14.6219 5.47813C14.3448 5.20104 14.0083 5.0625 13.6125 5.0625ZM4.1875 21.75C3.92917 21.75 3.70833 21.6583 3.525 21.475C3.34167 21.2917 3.25 21.0708 3.25 20.8125C3.25 20.5542 3.34167 20.3333 3.525 20.15C3.70833 19.9667 3.92917 19.875 4.1875 19.875H19.8125C20.0708 19.875 20.2917 19.9667 20.475 20.15C20.6583 20.3333 20.75 20.5542 20.75 20.8125C20.75 21.0708 20.6583 21.2917 20.475 21.475C20.2917 21.6583 20.0708 21.75 19.8125 21.75H4.1875Z"
        fill="#26201E"
      />
    </svg>
  )
}
