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

function IconPluginComponent(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 || 'hiagent';
    const loadingKls = spin ? ` ${prefix}-icon-loading` : '';
    return <svg className={`${prefix}-icon ${prefix}-icon-plugin${loadingKls} ${className}`} width={width} height={height} xmlns="http://www.w3.org/2000/svg" fill={useCurrentColor ? 'currentColor' : '#000'} viewBox="0 0 20 20" {...rest} ref={ref}><rect width="7.5" height="7.5" x="1.667" y="1.667" rx="1.6"/><rect width="7.5" height="7.5" x="10.833" y="10.833" rx="1.6"/><rect width="5.97" height="5.97" x="1.232" y="14.401" rx="1.6" transform="rotate(-45 1.232 14.4)"/><circle cx="14.583" cy="5.417" r="3.75" opacity=".5"/></svg>;
}

const IconPlugin = React.forwardRef(IconPluginComponent);
export default IconPlugin;
