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

export const IconPaperClip = 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-paper-clip`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M15.621 4.37908C15.0584 3.81666 14.2955 3.50072 13.5 3.50072C12.7045 3.50072 11.9416 3.81666 11.379 4.37908L4.379 11.3791C3.83239 11.9448 3.52982 12.7025 3.53647 13.4891C3.54312 14.2757 3.85845 15.0282 4.41455 15.5845C4.97064 16.1409 5.723 16.4566 6.50959 16.4636C7.29618 16.4706 8.05406 16.1684 8.62 15.6221H8.621L9.118 15.1221C9.25898 14.9849 9.44821 14.9086 9.6449 14.9097C9.8416 14.9107 10.03 14.989 10.1696 15.1276C10.3091 15.2662 10.3886 15.4541 10.3909 15.6508C10.3933 15.8475 10.3182 16.0372 10.182 16.1791L9.684 16.6801L9.682 16.6821C8.83808 17.526 7.69348 18.0001 6.5 18.0001C5.30652 18.0001 4.16192 17.526 3.318 16.6821C2.47408 15.8382 1.99997 14.6936 1.99997 13.5001C1.99997 12.3066 2.47408 11.162 3.318 10.3181L10.318 3.31808C11.1614 2.47363 12.3057 1.9988 13.4992 1.99805C14.6926 1.9973 15.8375 2.47069 16.682 3.31408C17.5264 4.15746 18.0013 5.30177 18.002 6.49525C18.0028 7.68873 17.5294 8.83363 16.686 9.67808L13.231 13.2311C12.9898 13.4855 12.7 13.689 12.3789 13.8296C12.0577 13.9702 11.7116 14.045 11.3611 14.0497C11.0105 14.0543 10.6626 13.9887 10.3378 13.8567C10.013 13.7247 9.71793 13.529 9.47002 13.281C9.22212 13.0331 9.02639 12.7381 8.89438 12.4133C8.76237 12.0885 8.69675 11.7406 8.70141 11.39C8.70607 11.0395 8.7809 10.6934 8.9215 10.3722C9.06209 10.0511 9.26559 9.76131 9.52 9.52008L12.97 6.06908C13.0391 5.99741 13.1219 5.94024 13.2134 5.90089C13.3048 5.86154 13.4033 5.8408 13.5028 5.83989C13.6024 5.83898 13.7012 5.85791 13.7934 5.89557C13.8856 5.93324 13.9693 5.98889 14.0398 6.05928C14.1102 6.12966 14.166 6.21338 14.2037 6.30553C14.2415 6.39768 14.2605 6.49643 14.2597 6.59602C14.2589 6.6956 14.2382 6.79403 14.199 6.88555C14.1597 6.97707 14.1026 7.05986 14.031 7.12908L10.581 10.5801C10.4763 10.6843 10.3931 10.8081 10.3362 10.9444C10.2793 11.0808 10.2499 11.227 10.2495 11.3747C10.2491 11.5225 10.2779 11.6688 10.334 11.8055C10.3902 11.9421 10.4728 12.0663 10.577 12.1711C10.6812 12.2758 10.805 12.359 10.9414 12.4159C11.0777 12.4727 11.2239 12.5022 11.3717 12.5026C11.5194 12.503 11.6658 12.4742 11.8024 12.418C11.939 12.3618 12.0633 12.2793 12.168 12.1751L15.622 8.62208C16.1844 8.05949 16.5004 7.29657 16.5004 6.50108C16.5004 5.70558 16.1844 4.94266 15.622 4.38008L15.621 4.37908Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconPaperClip.displayName = "IconPaperClip";

export default IconPaperClip;