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

export const IconFileUpload = 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-file-upload`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M4.6875 2.625C4.58395 2.625 4.5 2.70895 4.5 2.8125V17.1875C4.5 17.2911 4.58395 17.375 4.6875 17.375H15.3125C15.4161 17.375 15.5 17.2911 15.5 17.1875V9.6875C15.5 8.54841 14.5766 7.625 13.4375 7.625H12.1875C11.2555 7.625 10.5 6.86948 10.5 5.9375V4.6875C10.5 3.54841 9.57659 2.625 8.4375 2.625H4.6875ZM4.6875 1.125C3.75552 1.125 3 1.88052 3 2.8125V17.1875C3 18.1195 3.75552 18.875 4.6875 18.875H15.3125C16.2445 18.875 17 18.1195 17 17.1875V9.375C17 4.81865 13.3063 1.125 8.75 1.125H4.6875ZM11.7259 3.31472C11.9025 3.73721 12 4.20096 12 4.6875V5.9375C12 6.04105 12.0839 6.125 12.1875 6.125H13.4375C13.924 6.125 14.3878 6.22253 14.8103 6.39911C14.1521 5.06119 13.0638 3.97295 11.7259 3.31472ZM10 8.625C10.1989 8.625 10.3897 8.70402 10.5303 8.84467L13.0303 11.3447C13.3232 11.6376 13.3232 12.1124 13.0303 12.4053C12.7374 12.6982 12.2626 12.6982 11.9697 12.4053L10.75 11.1857L10.75 14.375C10.75 14.7892 10.4142 15.125 10 15.125C9.58579 15.125 9.25 14.7892 9.25 14.375L9.25 11.1857L8.03033 12.4053C7.73744 12.6982 7.26256 12.6982 6.96967 12.4053C6.67678 12.1124 6.67678 11.6376 6.96967 11.3447L9.46967 8.84467C9.61032 8.70402 9.80109 8.625 10 8.625Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconFileUpload.displayName = "IconFileUpload";

export default IconFileUpload;