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

export const IconArrowRotateLeftRectangleOutline = 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-arrow-rotate-left-rectangle-outline`,
  };
  return (
    <svg
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
      ref={forwardedRef}
    >
      <path
        d="M14.588 5.57176C14.8626 5.2616 14.8337 4.78761 14.5235 4.51306L13.5802 3.67805C14.3157 3.64405 14.9211 3.68658 15.4342 3.92495C15.9833 4.17998 16.5477 4.72112 16.9773 6.0063C17.1086 6.39915 17.5335 6.61115 17.9264 6.47983C18.3192 6.3485 18.5312 5.92358 18.3999 5.53073C17.8784 3.97073 17.0874 3.03896 16.0662 2.56456C15.2554 2.18793 14.3817 2.14314 13.5875 2.17586L14.3301 1.33696C14.6047 1.02681 14.5758 0.552814 14.2656 0.278266C13.9555 0.00371833 13.4815 0.0325844 13.2069 0.34274L11.2185 2.58909C10.9439 2.89924 10.9728 3.37324 11.283 3.64778L13.5293 5.63623C13.8395 5.91078 14.3135 5.88192 14.588 5.57176Z"
        fill={color}
      />
      <path
        d="M3 8.00005C3 6.89548 3.89543 6.00005 5 6.00005H13C14.1046 6.00005 15 6.89548 15 8.00005V16C15 17.1046 14.1046 18 13 18H5C3.89543 18 3 17.1046 3 16V8.00005ZM5 7.50005H13C13.2761 7.50005 13.5 7.7239 13.5 8.00005V16C13.5 16.2762 13.2761 16.5 13 16.5H5C4.72386 16.5 4.5 16.2762 4.5 16V8.00005C4.5 7.7239 4.72386 7.50005 5 7.50005Z"
        fill={color}
        fillRule="evenodd"
        clipRule="evenodd"
      />
    </svg>
  );
});

IconArrowRotateLeftRectangleOutline.displayName =
  "IconArrowRotateLeftRectangleOutline";

export default IconArrowRotateLeftRectangleOutline;