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

export const IconCloseCircleOutline = 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-close-circle-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M10 3.48362C6.37173 3.48362 3.5 6.39537 3.5 10C3.5 13.6046 6.45876 16.5318 10 16.5318C13.5413 16.5318 16.5025 13.5176 16.5025 10C16.5025 6.4824 13.6283 3.48362 10 3.48362ZM2.00098 10C2.00098 5.52512 5.70453 2 10 2C14.2955 2 18 5.4671 18 10C18 14.5329 14.2955 18.0039 10 18.0039C5.70453 18.0039 2.00098 14.4749 2.00098 10ZM7.59814 7.59812C7.84586 7.3504 8.32459 7.28497 8.62132 7.5817L10 8.94611L11.3557 7.5817C11.6718 7.26555 12.1729 7.35772 12.4206 7.60544C12.6683 7.85316 12.7117 8.34444 12.4206 8.63552L11.0562 10L12.4206 11.3643C12.7256 11.6694 12.6496 12.1542 12.4019 12.4019C12.1542 12.6496 11.6524 12.7204 11.3723 12.4403L10 11.0593L8.66026 12.4019C8.32761 12.7345 7.84586 12.6496 7.59814 12.4019C7.35042 12.1542 7.2715 11.6738 7.57814 11.3672L8.94856 10L7.59814 8.64106C7.27777 8.3207 7.35042 7.84584 7.59814 7.59812Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconCloseCircleOutline.displayName = "IconCloseCircleOutline";

export default IconCloseCircleOutline;