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

function IconDevComponent(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 || 'hkgai';
    const loadingKls = spin ? ` ${prefix}-icon-loading` : '';
    return <svg className={`${prefix}-icon ${prefix}-icon-dev${loadingKls} ${className}`} width={width} height={height} viewBox="0 0 158 62" fill={useCurrentColor ? 'currentColor' : '#000'} xmlns="http://www.w3.org/2000/svg" {...rest} ref={ref}><path d="M128.384 60.3198L112.784 20.3198H126.064L130.944 34.3198C131.957 37.2532 132.81 39.8932 133.504 42.2398 134.25 44.5332 134.704 46.1332 134.864 47.0398 135.13 45.8665 135.637 44.1065 136.384 41.7598 137.184 39.4132 138.09 36.9332 139.104 34.3198L144.464 20.3198H157.264L140.544 60.3198H128.384zM91.5994 61.36C87.5994 61.36 84.0261 60.4534 80.8794 58.64 77.7861 56.8267 75.3327 54.3467 73.5194 51.2 71.7594 48 70.8794 44.3467 70.8794 40.24 70.8794 36.08 71.7327 32.4267 73.4394 29.28 75.1994 26.08 77.6261 23.5734 80.7194 21.76 83.8127 19.9467 87.3594 19.04 91.3594 19.04 95.5727 19.04 99.1994 19.92 102.239 21.68 105.279 23.3867 107.626 25.84 109.279 29.04 110.933 32.1867 111.759 35.9467 111.759 40.32V43.44L77.3594 43.6 77.5194 36H99.5194C99.5194 33.8667 98.7994 32.1867 97.3594 30.96 95.9194 29.68 93.9461 29.04 91.4394 29.04 89.3594 29.04 87.6527 29.44 86.3194 30.24 85.0394 31.04 84.0794 32.2934 83.4394 34 82.7994 35.6534 82.4794 37.7867 82.4794 40.4 82.4794 44.1334 83.2261 46.9067 84.7194 48.72 86.2661 50.48 88.6394 51.36 91.8394 51.36 94.1861 51.36 96.1327 50.96 97.6794 50.16 99.2261 49.36 100.213 48.24 100.639 46.8H111.919C111.226 51.2267 109.039 54.7734 105.359 57.44 101.679 60.0534 97.0927 61.36 91.5994 61.36zM38.6675 61.36C34.8275 61.36 31.4942 60.5067 28.6675 58.8 25.8409 57.0933 23.6275 54.6933 22.0275 51.6 20.4809 48.4533 19.7075 44.7733 19.7075 40.56 19.7075 36.2933 20.5075 32.56 22.1075 29.36 23.7075 26.1067 25.9742 23.5733 28.9075 21.76 31.8942 19.9467 35.4142 19.04 39.4675 19.04 41.9742 19.04 44.2942 19.4933 46.4275 20.4 48.6142 21.3067 50.2942 22.5067 51.4675 24V0H63.7875V60.32H52.1875L51.5475 55.2C50.4809 57.0133 48.7742 58.5067 46.4275 59.68 44.1342 60.8 41.5475 61.36 38.6675 61.36zM41.6275 50.08C43.5475 50.08 45.2275 49.68 46.6675 48.88 48.1609 48.0267 49.3075 46.8533 50.1075 45.36 50.9609 43.8133 51.3875 42.0533 51.3875 40.08 51.3875 38.0533 50.9609 36.2933 50.1075 34.8 49.3075 33.3067 48.1609 32.16 46.6675 31.36 45.2275 30.5067 43.5475 30.08 41.6275 30.08 39.7075 30.08 38.0275 30.5067 36.5875 31.36 35.1475 32.2133 34.0275 33.3867 33.2275 34.88 32.4809 36.3733 32.1075 38.1067 32.1075 40.08 32.1075 42.0533 32.4809 43.7867 33.2275 45.28 34.0275 46.7733 35.1475 47.9467 36.5875 48.8 38.0275 49.6533 39.7075 50.08 41.6275 50.08zM7.36 61.3599C5.33333 61.3599 3.6 60.6666 2.16 59.2799.72 57.8399 0 56.1332 0 54.1599 0 52.1332.72 50.4266 2.16 49.0399 3.6 47.5999 5.33333 46.8799 7.36 46.8799 9.33333 46.8799 11.04 47.5999 12.48 49.0399 13.9733 50.4266 14.72 52.1332 14.72 54.1599 14.72 56.1332 13.9733 57.8399 12.48 59.2799 11.04 60.6666 9.33333 61.3599 7.36 61.3599z"/></svg>;
}

const IconDev = React.forwardRef(IconDevComponent);
export default IconDev;
