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

function IconJSONFormatComponent(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 || 'hiagent';
    const loadingKls = spin ? ` ${prefix}-icon-loading` : '';
    return <svg className={`${prefix}-icon ${prefix}-icon-JSON-format${loadingKls} ${className}`} width={width} height={height} xmlns="http://www.w3.org/2000/svg" fill={useCurrentColor ? 'currentColor' : 'none'} viewBox="0 0 16 16" {...rest} ref={ref}><path fill={useCurrentColor ? 'currentColor' : '#ECEDED'} d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4Z"/><path fill={useCurrentColor ? 'currentColor' : '#676B72'} d="M10.287 3.6c.65 0 1.16.122 1.504.388.355.273.512.756.512 1.402v.99c0 .283.033.49.091.627a.496.496 0 0 0 .274.278v.001c.132.058.333.094.61.1l.122.002V8.61l-.124.004c-.269.006-.466.04-.6.096a.52.52 0 0 0-.278.276l-.002.005-.036.102-.002.007c-.035.128-.055.3-.055.52v.99c0 .646-.158 1.128-.512 1.402-.344.266-.853.388-1.504.388h-.45v-1.098h.42c.251 0 .414-.052.514-.134l.006-.006.029-.027.004-.005c.098-.11.164-.327.164-.687V9.51c0-.397.062-.729.198-.984l.063-.103c.094-.137.21-.25.349-.338l.13-.084-.13-.084a1.206 1.206 0 0 1-.275-.241l-.073-.097-.063-.104c-.135-.255-.198-.586-.198-.983v-.934c0-.36-.067-.578-.165-.687l-.04-.038c-.1-.082-.263-.133-.513-.133h-.42V3.6h.45Zm-4.124 0v1.1h-.42c-.25 0-.413.05-.514.133l-.039.037c-.098.109-.165.326-.165.687v.934c0 .347-.048.645-.151.884l-.048.099-.062.105c-.09.133-.209.248-.348.337L4.284 8l.132.084a1.2 1.2 0 0 1 .345.332v.001l.065.108v.001c.136.255.2.586.2.983v.934c0 .36.066.578.164.687l.004.005.029.027.006.005c.1.083.263.135.514.135h.42V12.4h-.45c-.65 0-1.16-.122-1.504-.388-.355-.273-.512-.755-.512-1.402v-.99c0-.22-.02-.391-.055-.52l-.002-.006-.036-.103-.002-.004-.047-.089a.501.501 0 0 0-.23-.187V8.71l-.113-.037a2.1 2.1 0 0 0-.488-.059L2.6 8.61V7.388l.123-.002c.276-.006.476-.043.608-.1a.493.493 0 0 0 .272-.276h.001c.06-.138.093-.346.093-.63v-.99c0-.646.157-1.128.511-1.402.345-.266.854-.388 1.505-.388h.45Zm-.726 7.561Zm-.145-.071Zm5.488-.097Zm-5.577-.034Zm5.62-.078Zm-5.686-.202Zm-.024-1.463v-.001Zm-2.055-.474Zm9.656.06Zm-1.68-.216c-.026.058-.046.12-.065.184.007-.024.013-.048.021-.07l.043-.114Zm1.795.18c.022-.006.046-.01.07-.015l-.07.015Zm-8.151-.93A1.317 1.317 0 0 1 4.47 8c.074.048.144.102.207.163h-.001A1.327 1.327 0 0 0 4.47 8a1.33 1.33 0 0 0 .208-.164Zm6.744.24Zm-6.456-.662-.051.107c.023-.044.042-.09.062-.136l-.011.03Zm5.959-.358v-.001Zm1.562-.085Zm-.039-.121Zm-.04-.277ZM5.266 4.937Zm.079-.06Zm.217-.066Zm5.196-1.288Z"/></svg>;
}

const IconJSONFormat = React.forwardRef(IconJSONFormatComponent);
export default IconJSONFormat;
