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

function IconXComponent(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-X${loadingKls} ${className}`} width={width} height={height} viewBox="0 0 20 21" fill={useCurrentColor ? 'currentColor' : '#000'} xmlns="http://www.w3.org/2000/svg" {...rest} ref={ref}><path d="M16.2882 15.7999C16.4644 15.976 16.5633 16.2149 16.5633 16.4639C16.5633 16.713 16.4644 16.9519 16.2882 17.128C16.1121 17.3041 15.8733 17.4031 15.6242 17.4031C15.3751 17.4031 15.1362 17.3041 14.9601 17.128L9.99997 12.1663L5.03825 17.1264C4.86213 17.3026 4.62326 17.4015 4.37418 17.4015C4.12511 17.4015 3.88624 17.3026 3.71012 17.1264C3.534 16.9503 3.43506 16.7114 3.43506 16.4624C3.43506 16.2133 3.534 15.9744 3.71012 15.7983L8.67184 10.8381L3.71168 5.87643C3.53556 5.70031 3.43662 5.46144 3.43662 5.21237C3.43662 4.9633 3.53556 4.72443 3.71168 4.54831C3.8878 4.37219 4.12668 4.27324 4.37575 4.27324C4.62482 4.27324 4.86369 4.37219 5.03981 4.54831L9.99997 9.51002L14.9617 4.54752C15.1378 4.3714 15.3767 4.27246 15.6257 4.27246C15.8748 4.27246 16.1137 4.3714 16.2898 4.54752C16.4659 4.72364 16.5649 4.96252 16.5649 5.21159C16.5649 5.46066 16.4659 5.69953 16.2898 5.87565L11.3281 10.8381L16.2882 15.7999Z"/></svg>;
}

const IconX = React.forwardRef(IconXComponent);
export default IconX;
