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-shein-icon customeow-shein-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="M12.0459 7.0704L10.0001 9.11621L7.95428 7.07043L7.0704 7.95432L9.11619 10.0001L7.0704 12.0459L7.95428 12.9297L10.0001 10.884L12.0459 12.9298L12.9298 12.0459L10.884 10.0001L12.9298 7.95429L12.0459 7.0704Z"
          fill={color}
        />
        <path
          d="M18.3334 10.0001C18.3334 14.6025 14.6025 18.3334 10.0001 18.3334C5.39771 18.3334 1.66675 14.6025 1.66675 10.0001C1.66675 5.39771 5.39771 1.66675 10.0001 1.66675C14.6025 1.66675 18.3334 5.39771 18.3334 10.0001ZM17.0834 10.0001C17.0834 13.9121 13.9121 17.0834 10.0001 17.0834C6.08806 17.0834 2.91675 13.9121 2.91675 10.0001C2.91675 6.08806 6.08806 2.91675 10.0001 2.91675C13.9121 2.91675 17.0834 6.08806 17.0834 10.0001Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconCloseCircleOutline.displayName = "IconCloseCircleOutline";

export default IconCloseCircleOutline;