import React, { useId } from 'react';
import PropTypes from 'prop-types';
import Icon40PropValues from '../_defaultIconPropValues.ts';

const LeichteSprache = (props) => {
    const {
        width = Icon40PropValues.width,
        height = Icon40PropValues.height,
        stroke = Icon40PropValues.stroke,
        fill = Icon40PropValues.fill,
        ...restProps
    } = props;
    const id = useId();

    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width={width}
            height={height}
            {...restProps}
            fill="none"
        >
            <g fill={fill} stroke={stroke} strokeWidth={0.2} clipPath={`url(#${id})`}>
                <path d="M12 12c3 0 5.5-2.5 5.5-5.5S15 1 12 1 6.5 3.5 6.5 6.5 9 12 12 12Zm0-9.5c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4Z" />
                <path d="M23 16c0-.7-.2-1.3-.7-1.7-.4-.4-.8-.6-1.4-.7v-1.9c0-.4-.3-.7-.7-.8h-.3l-8 2.9L4 11c-.4-.1-.8.1-1 .4v2.2c-.5.1-1 .3-1.3.7-.5.4-.7 1-.7 1.7s.2 1.3.7 1.7c.3.4.8.6 1.3.7v1.1c0 .4.3.7.6.8l8.1
                2.7h.5l8.2-2.7c.4-.1.6-.4.6-.8v-1c.5-.1 1-.3 1.3-.7.5-.5.7-1.1.7-1.8ZM2.5 16c0-.3.1-.5.2-.7.2-.2.6-.3 1-.3.2 0 .6.1.8.2v1.5c-.2.2-.5.3-.8.3-.4 0-.8-.1-1-.3-.1-.2-.2-.4-.2-.7Zm2 2.4c.4-.1.8-.3
                1.1-.6.3-.4.4-.7.4-1v-1.7c0-.3-.1-.9-1-1.3-.2-.1-.3-.1-.5-.2v-.8l6.8 2.4v5.9L4.5 19zm8.3 2.8v-5.9l6.8-2.5v.8c-.7.2-1.5.7-1.5 1.5v1.7c0 .2.1.6.4.9s.7.5 1.1.6v.6c-.1.1-6.8 2.3-6.8
                2.3Zm8.5-4.5c-.2.2-.6.3-1 .3-.2 0-.6-.1-.7-.3v-1.5c.2-.1.5-.2.8-.2.4 0 .8.1 1 .3s.2.4.2.7c-.1.3-.2.5-.3.7Z"
                />
            </g>
            <defs>
                <clipPath id={id}>
                    <path fill="#fff" d="M0 0h24v24H0z" />
                </clipPath>
            </defs>
        </svg>
    );
};

LeichteSprache.propTypes = {
    width: PropTypes.string,
    height: PropTypes.string,
    fill: PropTypes.string,
    stroke: PropTypes.string,
};
export default LeichteSprache;