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

export const IconOutputValue = 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-output-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.5 3C2.67157 3 2 3.67157 2 4.5V15.5C2 16.3284 2.67157 17 3.5 17H6.99982C6.68597 16.5822 6.5 16.0628 6.5 15.5C6.5 14.1193 7.61929 13 9 13H12.5709C12.5893 11.3498 14.4933 10.4279 15.8004 11.4468L18 13.1614V4.5C18 3.67157 17.3284 3 16.5 3H3.5ZM5 7.75C5 7.33579 5.33579 7 5.75 7H14.25C14.6642 7 15 7.33579 15 7.75C15 8.16421 14.6642 8.5 14.25 8.5H5.75C5.33579 8.5 5 8.16421 5 7.75Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
        <path
          d="M14.0709 12.978C14.0709 12.5617 14.5499 12.3277 14.8783 12.5836L17.7796 14.8453C18.0364 15.0455 18.0364 15.4338 17.7796 15.634L14.8783 17.8956C14.5499 18.1516 14.0709 17.9176 14.0709 17.5013V16.0252H8.75C8.33579 16.0252 8 15.6894 8 15.2752C8 14.8609 8.33579 14.5252 8.75 14.5252H14.0709V12.978Z"
          fill={color}
        />
      </svg>
    );
  }
);

IconOutputValue.displayName = "IconOutputValue";

export default IconOutputValue;