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

export const IconFileVideo = 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-video`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M9.09204 14.1504C8.77622 14.3398 8.37442 14.1124 8.37442 13.744V10.1655C8.37442 9.79714 8.77622 9.56965 9.09204 9.75914L12.0742 11.5484C12.3809 11.7325 12.3809 12.177 12.0742 12.3611L9.09204 14.1504Z"
          fill={color}
        />
        <path
          d="M2.96289 2.8125C2.96289 1.88052 3.71841 1.125 4.65039 1.125H8.71289C13.2692 1.125 16.9629 4.81865 16.9629 9.375V17.1875C16.9629 18.1195 16.2074 18.875 15.2754 18.875H4.65039C3.71841 18.875 2.96289 18.1195 2.96289 17.1875V2.8125ZM4.46289 2.8125C4.46289 2.70895 4.54684 2.625 4.65039 2.625H8.40039C9.53948 2.625 10.4629 3.54841 10.4629 4.6875V5.9375C10.4629 6.86948 11.2184 7.625 12.1504 7.625H13.4004C14.5395 7.625 15.4629 8.54841 15.4629 9.6875V17.1875C15.4629 17.2911 15.3789 17.375 15.2754 17.375H4.65039C4.54684 17.375 4.46289 17.2911 4.46289 17.1875V2.8125ZM11.9629 4.6875C11.9629 4.20096 11.8654 3.73721 11.6888 3.31472C13.0267 3.97295 14.1149 5.06119 14.7732 6.39911C14.3507 6.22253 13.8869 6.125 13.4004 6.125H12.1504C12.0468 6.125 11.9629 6.04105 11.9629 5.9375V4.6875Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconFileVideo.displayName = "IconFileVideo";

export default IconFileVideo;
