import { iconVariants } from "./variants"

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

export default function ThermostatIcon({
  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}
    >
      <mask
        id="mask0_69_3477"
        style={{ maskType: "alpha" }}
        maskUnits="userSpaceOnUse"
        x="0"
        y="0"
        width="24"
        height="24"
      >
        <rect width="24" height="24" fill="#D9D9D9" />
      </mask>
      <g mask="url(#mask0_69_3477)">
        <path
          d="M12 21.75C10.6584 21.75 9.5188 21.2812 8.5813 20.3438C7.6438 19.4062 7.17505 18.267 7.17505 16.9258C7.17505 16.1503 7.34797 15.4208 7.6938 14.7375C8.03963 14.0542 8.52505 13.4833 9.15005 13.025V5.1C9.15005 4.30833 9.42713 3.63542 9.9813 3.08125C10.5355 2.52708 11.2084 2.25 12 2.25C12.7917 2.25 13.4646 2.52708 14.0188 3.08125C14.573 3.63542 14.85 4.30833 14.85 5.1V13.025C15.475 13.4833 15.9605 14.0542 16.3063 14.7375C16.6521 15.4208 16.825 16.1503 16.825 16.9258C16.825 18.267 16.3563 19.4062 15.4188 20.3438C14.4813 21.2812 13.3417 21.75 12 21.75ZM11.025 11.05H12.975V10.025H12V9.04375H12.975V7.08125H12V6.1H12.975V5.1C12.975 4.82375 12.8817 4.59219 12.6951 4.40533C12.5085 4.21844 12.2772 4.125 12.0014 4.125C11.7255 4.125 11.4938 4.21844 11.3063 4.40533C11.1188 4.59219 11.025 4.82375 11.025 5.1V11.05Z"
          fill="#26201E"
        />
      </g>
    </svg>
  )
}
