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

function IconTranslateComponent(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-Translate${loadingKls} ${className}`} width={width} height={height} viewBox="0 0 24 24" fill={useCurrentColor ? 'currentColor' : '#000'} xmlns="http://www.w3.org/2000/svg" {...rest} ref={ref}><path d="M23.1703 19.9144L17.9203 9.41437C17.858 9.28982 17.7623 9.18506 17.6438 9.11185C17.5253 9.03864 17.3888 8.99986 17.2495 8.99986C17.1103 8.99986 16.9737 9.03864 16.8553 9.11185C16.7368 9.18506 16.641 9.28982 16.5787 9.41437L14.5434 13.4859C12.9481 13.3962 11.4131 12.8452 10.125 11.8997C11.6363 10.2857 12.552 8.20463 12.7209 6H15C15.1989 6 15.3897 5.92098 15.5303 5.78033C15.671 5.63968 15.75 5.44891 15.75 5.25C15.75 5.05109 15.671 4.86032 15.5303 4.71967C15.3897 4.57902 15.1989 4.5 15 4.5H9.75V3C9.75 2.80109 9.67098 2.61032 9.53033 2.46967C9.38968 2.32902 9.19891 2.25 9 2.25C8.80109 2.25 8.61032 2.32902 8.46967 2.46967C8.32902 2.61032 8.25 2.80109 8.25 3V4.5H3C2.80109 4.5 2.61032 4.57902 2.46967 4.71967C2.32902 4.86032 2.25 5.05109 2.25 5.25C2.25 5.44891 2.32902 5.63968 2.46967 5.78033C2.61032 5.92098 2.80109 6 3 6H11.2153C11.0483 7.83811 10.268 9.56667 9 10.9078C8.20984 10.0741 7.60306 9.08406 7.21875 8.00156C7.18715 7.90712 7.13705 7.81991 7.07139 7.74503C7.00572 7.67015 6.9258 7.6091 6.83629 7.56544C6.74678 7.52178 6.64946 7.49639 6.55003 7.49074C6.4506 7.48509 6.35104 7.49931 6.25715 7.53255C6.16327 7.5658 6.07695 7.61741 6.00323 7.68437C5.92951 7.75133 5.86987 7.83231 5.82778 7.92257C5.78569 8.01283 5.76199 8.11057 5.75808 8.21009C5.75417 8.3096 5.77012 8.4089 5.805 8.50219C6.25244 9.76769 6.95726 10.9267 7.875 11.9062C6.46197 12.9446 4.75353 13.5031 3 13.5C2.80109 13.5 2.61032 13.579 2.46967 13.7197C2.32902 13.8603 2.25 14.0511 2.25 14.25C2.25 14.4489 2.32902 14.6397 2.46967 14.7803C2.61032 14.921 2.80109 15 3 15C5.17555 15.0024 7.28875 14.2734 9 12.93C10.3965 14.0211 12.0635 14.7117 13.8225 14.9278L11.3287 19.9144C11.2847 20.0025 11.2584 20.0984 11.2514 20.1966C11.2444 20.2949 11.2568 20.3935 11.2879 20.487C11.3507 20.6757 11.486 20.8318 11.6639 20.9208C11.8418 21.0098 12.0478 21.0245 12.2365 20.9616C12.4253 20.8988 12.5813 20.7635 12.6703 20.5856L13.9631 18H20.5359L21.8288 20.5856C21.8911 20.7102 21.9869 20.815 22.1055 20.8882C22.2241 20.9614 22.3607 21.0001 22.5 21C22.6278 20.9999 22.7535 20.9672 22.8651 20.9049C22.9768 20.8426 23.0706 20.7528 23.1378 20.644C23.2049 20.5353 23.2432 20.4111 23.2489 20.2834C23.2546 20.1557 23.2275 20.0287 23.1703 19.9144ZM14.7131 16.5L17.25 11.4272L19.7859 16.5H14.7131Z"/></svg>;
}

const IconTranslate = React.forwardRef(IconTranslateComponent);
export default IconTranslate;
