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

function IconSilenceComponent(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-silence${loadingKls} ${className}`} width={width} height={height} xmlns="http://www.w3.org/2000/svg" fill={useCurrentColor ? 'currentColor' : 'none'} viewBox="0 0 20 20" {...rest} ref={ref}><path fill={useCurrentColor ? 'currentColor' : '#fff'} d="M10.417 2.7a.634.634 0 0 1 .611.469l.02.117.002.056v13.325a.634.634 0 0 1-.586.63l-.056.003h-.54a.634.634 0 0 1-.26-.056l-.078-.042-.052-.036-4.865-3.741a.632.632 0 0 1-.244-.445l-.003-.067V7.078a.635.635 0 0 1 .206-.469l.05-.04L9.48 2.83a.633.633 0 0 1 .322-.129l.073-.002h.542Zm.706 14.41-.096.123a.83.83 0 0 0 .149-.23.749.749 0 0 1-.053.106ZM9.461 4.443 5.71 7.33l-.077.06v5.222l.077.06 4.072 3.133V4.197l-.322.247ZM2.5 6.866a.217.217 0 0 1 .217.217v5.834a.218.218 0 0 1-.217.217h-.833a.218.218 0 0 1-.217-.217V7.083a.218.218 0 0 1 .217-.217H2.5Zm1.938-.403a.843.843 0 0 0-.06.061l-.055.068a.846.846 0 0 1 .055-.068l.06-.061Zm6.421-3.836.124.096a.831.831 0 0 0-.215-.142c.03.015.062.028.091.046Zm7.28 5.762L16.527 10l1.612 1.611-.778.778-1.611-1.612-1.611 1.612-.778-.778L14.973 10 13.36 8.389l.778-.778 1.611 1.612 1.611-1.612.778.778Z"/></svg>;
}

const IconSilence = React.forwardRef(IconSilenceComponent);
export default IconSilence;
