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

function IconFirstTokensCostComponent(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-first_tokens_cost${loadingKls} ${className}`} width={width} height={height} viewBox="0 0 18 18" fill={useCurrentColor ? 'currentColor' : '#000'} xmlns="http://www.w3.org/2000/svg" {...rest} ref={ref}><path d="M16.2881 2.25C16.6224 2.25 16.744 2.28522 16.8662 2.35059C16.9884 2.41593 17.0841 2.51164 17.1494 2.63379C17.2148 2.75601 17.25 2.87759 17.25 3.21191V5.5L15.75 7V3.75H2.25V15H7.75L6.25 16.5H1.71191C1.37759 16.5 1.25601 16.4648 1.13379 16.3994C1.01164 16.3341 0.915934 16.2384 0.850586 16.1162C0.785221 15.994 0.75 15.8724 0.75 15.5381V3.21191C0.75 2.87759 0.785221 2.75601 0.850586 2.63379C0.915934 2.51164 1.01164 2.41593 1.13379 2.35059C1.25601 2.28522 1.37759 2.25 1.71191 2.25H16.2881ZM12.875 7.5C15.3603 7.5 17.375 9.51472 17.375 12C17.375 14.4853 15.3603 16.5 12.875 16.5C10.3897 16.5 8.375 14.4853 8.375 12C8.375 9.51472 10.3897 7.5 12.875 7.5ZM12.875 9C11.2181 9 9.875 10.3431 9.875 12C9.875 13.6569 11.2181 15 12.875 15C14.5319 15 15.875 13.6569 15.875 12C15.875 10.3431 14.5319 9 12.875 9ZM13.25 9.75C13.4571 9.75 13.625 9.91789 13.625 10.125V11.25H14.75C14.9571 11.25 15.125 11.4179 15.125 11.625V12.375C15.125 12.5821 14.9571 12.75 14.75 12.75H12.5C12.2929 12.75 12.125 12.5821 12.125 12.375V10.125C12.125 9.91789 12.2929 9.75 12.5 9.75H13.25Z"/></svg>;
}

const IconFirstTokensCost = React.forwardRef(IconFirstTokensCostComponent);
export default IconFirstTokensCost;
