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

export const IconCog6Tooth = 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-cog-6-tooth`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <g
          stroke={color}
          clipPath="url(#a)"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="M7.99464 3.28344C8.06998 2.83139 8.46109 2.50006 8.91938 2.50006H11.081C11.5393 2.50006 11.9304 2.83139 12.0058 3.28344L12.1837 4.35098C12.2356 4.66268 12.4439 4.92232 12.7204 5.07536C12.7822 5.10958 12.8433 5.14492 12.9037 5.18137C13.1746 5.34493 13.504 5.39578 13.8003 5.28478L14.8144 4.90487C15.2435 4.7441 15.726 4.91715 15.9552 5.31404L17.036 7.18607C17.2651 7.58296 17.1737 8.08734 16.8199 8.37861L15.983 9.06762C15.7392 9.26829 15.6184 9.57816 15.6242 9.89383C15.6249 9.92916 15.6252 9.96457 15.6252 10.0001C15.6252 10.0355 15.6249 10.0709 15.6242 10.1063C15.6184 10.422 15.7392 10.7318 15.983 10.9325L16.8199 11.6215C17.1737 11.9128 17.2651 12.4172 17.036 12.814L15.9552 14.6861C15.726 15.083 15.2435 15.256 14.8144 15.0952L13.8003 14.7153C13.504 14.6043 13.1746 14.6552 12.9037 14.8187C12.8433 14.8552 12.7822 14.8905 12.7204 14.9248C12.4439 15.0778 12.2356 15.3374 12.1837 15.6491L12.0058 16.7167C11.9304 17.1687 11.5393 17.5001 11.081 17.5001H8.91938C8.46109 17.5001 8.06998 17.1687 7.99464 16.7167L7.81671 15.6491C7.76476 15.3374 7.55645 15.0778 7.27998 14.9248C7.21817 14.8905 7.15707 14.8552 7.09671 14.8188C6.82585 14.6552 6.4964 14.6043 6.2001 14.7153L5.18604 15.0952C4.75688 15.256 4.27439 15.083 4.04525 14.6861L2.96443 12.8141C2.73529 12.4172 2.82666 11.9128 3.18048 11.6215L4.01744 10.9325C4.2612 10.7318 4.38203 10.422 4.37618 10.1063C4.37553 10.071 4.3752 10.0355 4.3752 10.0001C4.3752 9.96458 4.37553 9.92917 4.37618 9.89385C4.38203 9.57817 4.2612 9.2683 4.01744 9.06764L3.18048 8.37862C2.82666 8.08735 2.73529 7.58297 2.96443 7.18608L4.04525 5.31405C4.27439 4.91716 4.75688 4.74411 5.18604 4.90489L6.20009 5.28478C6.49639 5.39579 6.82583 5.34494 7.0967 5.18138C7.15706 5.14493 7.21816 5.10958 7.27998 5.07536C7.55645 4.92232 7.76476 4.66268 7.81671 4.35098L7.99464 3.28344Z" />
          <path d="M12.5 9.99999C12.5 11.3807 11.3807 12.5 10 12.5C8.61929 12.5 7.50001 11.3807 7.50001 9.99999C7.50001 8.61928 8.61929 7.49999 10 7.49999C11.3807 7.49999 12.5 8.61928 12.5 9.99999Z" />
        </g>
        <defs>
          <clipPath id="a">
            <path fill={color} d="M0 0H20V20H0z" />
          </clipPath>
        </defs>
      </svg>
    );
  }
);

IconCog6Tooth.displayName = "IconCog6Tooth";

export default IconCog6Tooth;