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

function IconFirstFrameComponent(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_frame${loadingKls} ${className}`} width={width} height={height} viewBox="0 0 22 22" fill={useCurrentColor ? 'currentColor' : '#000'} xmlns="http://www.w3.org/2000/svg" {...rest} ref={ref}><path d="M17.5857 3.6102C18.5798 3.6102 19.3855 4.41589 19.3855 5.41V16.5868C19.3854 17.5808 18.5797 18.3866 17.5857 18.3866H7.09937C6.10545 18.3864 5.29969 17.5807 5.29956 16.5868V5.41C5.29956 4.41597 6.10536 3.61033 7.09937 3.6102H17.5857ZM3.40991 3.70004C3.85169 3.70004 4.20963 4.05809 4.20972 4.49985V17.4998C4.20972 17.9417 3.85174 18.2997 3.40991 18.2997C2.96808 18.2997 2.61011 17.9417 2.61011 17.4998V4.49985C2.61019 4.05809 2.96814 3.70004 3.40991 3.70004ZM7.09937 5.20981C6.98902 5.20994 6.89917 5.29963 6.89917 5.41V16.5868C6.8993 16.697 6.9891 16.7868 7.09937 16.787H17.5857C17.6961 16.787 17.7858 16.6971 17.7859 16.5868V5.41C17.7859 5.29955 17.6962 5.20981 17.5857 5.20981H7.09937ZM10.9441 7.83481C11.045 7.83481 11.1426 7.86946 11.2214 7.93246L14.5105 10.5633C14.7019 10.7167 14.7329 10.9958 14.5798 11.1873C14.5594 11.2129 14.536 11.2362 14.5105 11.2567L11.2214 13.8875C11.0298 14.0408 10.7507 14.0099 10.5974 13.8182C10.5344 13.7394 10.4998 13.6418 10.4998 13.5409V8.27914C10.4998 8.03373 10.6987 7.83487 10.9441 7.83481Z"/></svg>;
}

const IconFirstFrame = React.forwardRef(IconFirstFrameComponent);
export default IconFirstFrame;
