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

export const IconCalendarOutline = 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-calendar-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M5.625 1.75C6.03921 1.75 6.375 2.08579 6.375 2.5V3.625H13.625V2.5C13.625 2.08579 13.9608 1.75 14.375 1.75C14.7892 1.75 15.125 2.08579 15.125 2.5V3.625H15.625C17.0747 3.625 18.25 4.80025 18.25 6.25V15.625C18.25 17.0747 17.0747 18.25 15.625 18.25H4.375C2.92525 18.25 1.75 17.0747 1.75 15.625V6.25C1.75 4.80025 2.92525 3.625 4.375 3.625H4.875V2.5C4.875 2.08579 5.21079 1.75 5.625 1.75ZM4.375 5.125C3.75368 5.125 3.25 5.62868 3.25 6.25V7.00261C3.59097 6.84063 3.9724 6.75 4.375 6.75H15.625C16.0276 6.75 16.409 6.84063 16.75 7.00261V6.25C16.75 5.62868 16.2463 5.125 15.625 5.125H4.375ZM16.75 9.375C16.75 8.75368 16.2463 8.25 15.625 8.25H4.375C3.75368 8.25 3.25 8.75368 3.25 9.375V15.625C3.25 16.2463 3.75368 16.75 4.375 16.75H15.625C16.2463 16.75 16.75 16.2463 16.75 15.625V9.375Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconCalendarOutline.displayName = "IconCalendarOutline";

export default IconCalendarOutline;