import React, { ForwardedRef, useContext } from 'react';
import { OriginIconProps } from '../type';
import { Context } from '../context';

function IconCloseComponent(props: OriginIconProps, ref: ForwardedRef<SVGSVGElement>) {
    const { prefix: prefixFromContext } = useContext(Context);
    const { className = '', prefix: prefixFromProps, width = '1em', height = '1em', useCurrentColor = true, spin, ...rest } = props;

    const prefix = prefixFromProps || prefixFromContext || 'hkgai';
    const loadingKls = spin ? ` ${prefix}-icon-loading` : '';
    return <svg className={`${prefix}-icon ${prefix}-icon-Close${loadingKls} ${className}`} width={width} height={height} viewBox="0 0 18 18" fill={useCurrentColor ? 'currentColor' : '#000'} xmlns="http://www.w3.org/2000/svg" {...rest} ref={ref}><path d="M9 0.875C7.39303 0.875 5.82214 1.35152 4.486 2.24431C3.14985 3.1371 2.10844 4.40605 1.49348 5.8907C0.87852 7.37535 0.717618 9.00901 1.03112 10.5851C1.34463 12.1612 2.11846 13.6089 3.25476 14.7452C4.39106 15.8815 5.8388 16.6554 7.4149 16.9689C8.99099 17.2824 10.6247 17.1215 12.1093 16.5065C13.594 15.8916 14.8629 14.8502 15.7557 13.514C16.6485 12.1779 17.125 10.607 17.125 9C17.1227 6.84581 16.266 4.78051 14.7427 3.25727C13.2195 1.73403 11.1542 0.877275 9 0.875ZM11.9422 11.0578C12.0003 11.1159 12.0463 11.1848 12.0777 11.2607C12.1092 11.3366 12.1254 11.4179 12.1254 11.5C12.1254 11.5821 12.1092 11.6634 12.0777 11.7393C12.0463 11.8152 12.0003 11.8841 11.9422 11.9422C11.8841 12.0003 11.8152 12.0463 11.7393 12.0777C11.6634 12.1092 11.5821 12.1253 11.5 12.1253C11.4179 12.1253 11.3366 12.1092 11.2607 12.0777C11.1848 12.0463 11.1159 12.0003 11.0578 11.9422L9 9.88359L6.94219 11.9422C6.88412 12.0003 6.81518 12.0463 6.73931 12.0777C6.66344 12.1092 6.58213 12.1253 6.5 12.1253C6.41788 12.1253 6.33656 12.1092 6.26069 12.0777C6.18482 12.0463 6.11588 12.0003 6.05782 11.9422C5.99975 11.8841 5.95368 11.8152 5.92226 11.7393C5.89083 11.6634 5.87466 11.5821 5.87466 11.5C5.87466 11.4179 5.89083 11.3366 5.92226 11.2607C5.95368 11.1848 5.99975 11.1159 6.05782 11.0578L8.11641 9L6.05782 6.94219C5.94054 6.82491 5.87466 6.66585 5.87466 6.5C5.87466 6.33415 5.94054 6.17509 6.05782 6.05781C6.17509 5.94054 6.33415 5.87465 6.5 5.87465C6.66586 5.87465 6.82492 5.94054 6.94219 6.05781L9 8.11641L11.0578 6.05781C11.1159 5.99974 11.1848 5.95368 11.2607 5.92225C11.3366 5.89083 11.4179 5.87465 11.5 5.87465C11.5821 5.87465 11.6634 5.89083 11.7393 5.92225C11.8152 5.95368 11.8841 5.99974 11.9422 6.05781C12.0003 6.11588 12.0463 6.18482 12.0777 6.26069C12.1092 6.33656 12.1254 6.41788 12.1254 6.5C12.1254 6.58212 12.1092 6.66344 12.0777 6.73931C12.0463 6.81518 12.0003 6.88412 11.9422 6.94219L9.8836 9L11.9422 11.0578Z"/></svg>;
}

const IconClose = React.forwardRef(IconCloseComponent);
export default IconClose;
