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

function IconImageComponent(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-image${loadingKls} ${className}`} width={width} height={height} viewBox="0 0 16 20" fill="none" {...rest} ref={ref}><mask id="svg_28ab3c89ad__a" style={{maskType: 'alpha'}} maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="20"><path d="M1.103 0h9.964c.146 0 .286.056.389.157l4.38 4.255c.105.101.164.24.164.384v14.123c0 .597-.494 1.081-1.103 1.081H1.103C.494 20 0 19.516 0 18.919V1.08C0 .484.494 0 1.103 0z" fill={useCurrentColor ? 'currentColor' : '#fff'}/></mask><g mask="url(#svg_28ab3c89ad__a)"><path d="M1.103 0h9.964c.146 0 .286.056.389.157l4.38 4.255c.105.101.164.24.164.384v14.123c0 .597-.494 1.081-1.103 1.081H1.103C.494 20 0 19.516 0 18.919V1.08C0 .484.494 0 1.103 0z" fill={useCurrentColor ? 'currentColor' : '#00AA2A'}/><path fillRule="evenodd" clipRule="evenodd" d="M11.297 0h4.69v4.595H12.4c-.61 0-1.103-.484-1.103-1.081V0z" fill={useCurrentColor ? 'currentColor' : '#79DD88'}/><path fillRule="evenodd" clipRule="evenodd" d="M13.443 9.508a.321.321 0 01.106.238v6.2c0 .149-.124.27-.276.27H2.7a.218.218 0 01-.22-.216c0-.051.018-.1.051-.14l3.565-4.165a.56.56 0 01.845 0l1.893 2.211 4.14-4.38a.336.336 0 01.468-.018zM4.72 7.297c.305 0 .552.242.552.54V8.92c0 .298-.247.54-.552.54H3.618a.546.546 0 01-.552-.54V7.837c0-.298.247-.54.552-.54H4.72z" fill={useCurrentColor ? 'currentColor' : '#fff'}/></g></svg>;
}

const IconImage = React.forwardRef(IconImageComponent);
export default IconImage;
