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

function IconLoadingComponent(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-Loading${loadingKls} ${className}`} width={width} height={height} viewBox="0 0 30 29" fill={useCurrentColor ? 'currentColor' : '#000'} xmlns="http://www.w3.org/2000/svg" {...rest} ref={ref}><path fillRule="evenodd" clipRule="evenodd" d="M15.0001 8.82353C17.4367 8.82353 19.4119 6.84831 19.4119 4.41176C19.4119 1.97521 17.4367 0 15.0001 0C12.5636 0 10.5884 1.97521 10.5884 4.41176C10.5884 6.84831 12.5636 8.82353 15.0001 8.82353ZM8.82353 12.3532C8.82353 14.7897 6.84831 16.7649 4.41176 16.7649C1.97521 16.7649 0 14.7897 0 12.3532C0 9.91662 1.97521 7.94141 4.41176 7.94141C6.84831 7.94141 8.82353 9.91662 8.82353 12.3532ZM30 12.3532C30 14.7897 28.0248 16.7649 25.5883 16.7649C23.1517 16.7649 21.1765 14.7897 21.1765 12.3532C21.1765 9.91662 23.1517 7.94141 25.5883 7.94141C28.0248 7.94141 30 9.91662 30 12.3532ZM25.8089 23.8234C25.8089 26.2599 23.8337 28.2351 21.3971 28.2351C18.9606 28.2351 16.9854 26.2599 16.9854 23.8234C16.9854 21.3868 18.9606 19.4116 21.3971 19.4116C23.8337 19.4116 25.8089 21.3868 25.8089 23.8234ZM8.60293 28.2351C11.0395 28.2351 13.0147 26.2599 13.0147 23.8234C13.0147 21.3868 11.0395 19.4116 8.60293 19.4116C6.16638 19.4116 4.19116 21.3868 4.19116 23.8234C4.19116 26.2599 6.16638 28.2351 8.60293 28.2351Z"/></svg>;
}

const IconLoading = React.forwardRef(IconLoadingComponent);
export default IconLoading;
