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

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

    const prefix = prefixFromProps || prefixFromContext || 'hkgai';
    const loadingKls = spin ? ` ${prefix}-icon-loading` : '';
    return <svg className={`${prefix}-icon ${prefix}-icon-word-blue${loadingKls} ${className}`} width={width} height={height} viewBox="0 0 28 28" fill="none" {...rest} ref={ref}><path d="M27.784 8.408V2.86c0-.666-.449-1.11-1.121-1.11H8.723c-.672 0-1.121.444-1.121 1.11v5.548l10.091 2.22 10.09-2.22z" fill={useCurrentColor ? 'currentColor' : '#71C3FF'}/><path d="M27.784 8.408H7.602v5.548l10.652 2.22 9.53-2.22V8.408z" fill={useCurrentColor ? 'currentColor' : '#4397F2'}/><path d="M27.784 13.956H7.602v5.547l10.091 1.665 10.09-1.665v-5.547z" fill={useCurrentColor ? 'currentColor' : '#2675EB'}/><path d="M27.784 19.503H7.602v5.549c0 .666.448 1.11 1.121 1.11h17.94c.672 0 1.12-.444 1.12-1.11v-5.549z" fill={useCurrentColor ? 'currentColor' : '#2A5DB7'}/><path opacity=".5" d="M16.348 7.298H7.602v15.535h8.521c.785 0 1.57-.777 1.57-1.554V8.63c0-.776-.56-1.33-1.345-1.33z" fill={useCurrentColor ? 'currentColor' : '#0C2F73'}/><path d="M15.227 21.723H2.22c-.784 0-1.345-.555-1.345-1.331V7.52c0-.776.56-1.331 1.345-1.331h13.118c.673 0 1.234.555 1.234 1.33v12.983c0 .666-.561 1.221-1.345 1.221z" fill={useCurrentColor ? 'currentColor' : '#2675EB'}/><path d="M12.311 18.394H10.63l-1.907-6.102-1.906 6.102H5.136L3.342 9.517h1.57l1.233 6.214L8.05 9.74h1.345l1.794 5.992 1.345-6.214h1.57l-1.794 8.878z" fill={useCurrentColor ? 'currentColor' : '#fff'}/></svg>;
}

const IconWordBlue = React.forwardRef(IconWordBlueComponent);
export default IconWordBlue;
