import { iconVariants } from "./variants"

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

export default function FootstoolIcon({
  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_81_881"
        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_81_881)">
        <path
          d="M3.2251 19.8125V9.9444C3.2251 9.40648 3.41468 8.95211 3.79385 8.58127C4.17301 8.21044 4.63195 8.02502 5.17065 8.02502C14.2941 8.02502 15.6761 8.02502 18.8295 8.02502C19.3682 8.02502 19.8272 8.21044 20.2063 8.58127C20.5855 8.95211 20.7751 9.40648 20.7751 9.9444V19.8125C20.7751 20.0709 20.6834 20.2917 20.5001 20.475C20.3168 20.6584 20.0959 20.75 19.8376 20.75C19.5793 20.75 19.3584 20.6584 19.1751 20.475C18.9918 20.2917 18.9001 20.0709 18.9001 19.8125V14.8H5.1001V19.8125C5.1001 20.0709 5.00843 20.2917 4.8251 20.475C4.64176 20.6584 4.42093 20.75 4.1626 20.75C3.90426 20.75 3.68343 20.6584 3.5001 20.475C3.31676 20.2917 3.2251 20.0709 3.2251 19.8125ZM5.1001 12.925H18.9001V9.90003H5.1001V12.925Z"
          fill="#26201E"
        />
      </g>
    </svg>
  )
}
