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

export const IconInputValue = 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-input-value`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path fill={color} d="M0 0H20V20H0z" />
        <path
          d="M3.50001 3C2.67159 3 2.00001 3.67157 2.00001 4.5V13.1614L4.19965 11.4468C5.50669 10.4279 7.41069 11.3498 7.42911 13H11C12.3807 13 13.5 14.1193 13.5 15.5C13.5 16.0628 13.314 16.5822 13.0002 17H16.5C17.3284 17 18 16.3284 18 15.5V4.5C18 3.67157 17.3284 3 16.5 3H3.50001ZM5.00001 7.75C5.00001 7.33579 5.3358 7 5.75001 7H14.25C14.6642 7 15 7.33579 15 7.75C15 8.16421 14.6642 8.5 14.25 8.5H5.75001C5.3358 8.5 5.00001 8.16421 5.00001 7.75Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
        <path
          d="M5.90134 17.5013C5.90134 17.9176 5.4223 18.1516 5.09395 17.8956L2.1926 15.634C1.9358 15.4338 1.9358 15.0455 2.1926 14.8453L5.09395 12.5836C5.4223 12.3277 5.90134 12.5616 5.90134 12.978V14.4541H11.2222C11.6365 14.4541 11.9722 14.7899 11.9722 15.2041C11.9722 15.6183 11.6365 15.9541 11.2222 15.9541H5.90134V17.5013Z"
          fill={color}
        />
      </svg>
    );
  }
);

IconInputValue.displayName = "IconInputValue";

export default IconInputValue;