import { forwardRef } from "react";
import type { IconProps } from "../../types";

export const IconHourglassOutline = forwardRef<SVGSVGElement, IconProps>(
  ({ color = "currentColor", ...props }, forwardedRef) => {
    const { className } = props;
    props = {
      ...props,
      width: `${props.width || props.size || 20}`,
      height: `${props.height || props.size || 20}`,
      className: `${
        className ? className + " " : ""
      }customeow-icon customeow-icon-icon-hourglass-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M4 2.25C3.58579 2.25 3.25 2.58579 3.25 3C3.25 3.41421 3.58579 3.75 4 3.75H4.40322C4.90908 5.84486 5.5676 7.50659 6.40894 8.68447C6.7914 9.2199 7.21797 9.6625 7.68803 9.99878C7.21794 10.3348 6.79137 10.7772 6.40894 11.3126C5.56749 12.4906 4.90896 14.1534 4.40311 16.25H4C3.58579 16.25 3.25 16.5858 3.25 17C3.25 17.4142 3.58579 17.75 4 17.75H16C16.4142 17.75 16.75 17.4142 16.75 17C16.75 16.5858 16.4142 16.25 16 16.25H15.5968C15.0909 14.1551 14.4324 12.4934 13.5911 11.3155C13.2086 10.7801 12.782 10.3375 12.312 10.0012C12.7821 9.66524 13.2086 9.22279 13.5911 8.68739C14.4325 7.50936 15.0911 5.8466 15.5969 3.75H16C16.4142 3.75 16.75 3.41421 16.75 3C16.75 2.58579 16.4142 2.25 16 2.25H4ZM14.0512 3.75H5.94901C6.41625 5.56988 6.98481 6.90998 7.62954 7.81261C8.36046 8.8359 9.14784 9.24927 10.0006 9.25C10.8528 9.25072 11.6397 8.8386 12.3705 7.81554C13.0152 6.91285 13.5839 5.57181 14.0512 3.75ZM12.3705 12.1874C13.0152 13.09 13.5838 14.4301 14.051 16.25H5.94882C6.41612 14.4282 6.98477 13.0872 7.62954 12.1845C8.3603 11.1614 9.14716 10.7493 9.99937 10.75C10.8522 10.7507 11.6396 11.1641 12.3705 12.1874Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconHourglassOutline.displayName = "IconHourglassOutline";

export default IconHourglassOutline;