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

const Globe = (props) => {
    const {
        width = Icon40PropValues.width,
        height = Icon40PropValues.height,
        fill = Icon40PropValues.fill,
        stroke = Icon40PropValues.stroke,
        ...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.4} clipPath={`url(#${id})`}>
                <path d="M11.995 22.995C5.935 22.995 1 18.065 1 12S5.935 1.005 11.995 1.005 22.99 5.935 22.99 12s-4.93 10.995-10.995 10.995Zm0-20.52C6.74 2.475 2.47 6.745 2.47 12s4.275 9.525 9.525 9.525S21.52 17.25 21.52 12s-4.27-9.525-9.525-9.525Z" />
                <path d="M11.995 22.995C9.27 22.995 7.84 17.465 7.84 12S9.27 1.005 11.995 1.005 16.15 6.535 16.15 12s-1.425 10.995-4.155 10.995Zm0-20.52C10.9 2.475 9.31 6.185 9.31 12s1.59 9.525 2.685 9.525S14.68 17.815 14.68 12s-1.59-9.525-2.685-9.525Z" />
                <path d="M21.525 9.315H2.47a.736.736 0 0 1 0-1.47h19.055a.736.736 0 0 1 0 1.47ZM21.525 16.155H2.47a.736.736 0 0 1 0-1.47h19.055a.736.736 0 0 1 0 1.47Z" />
            </g>
            <defs>
                <clipPath id={id}>
                    <path fill="#fff" d="M0 0h24v24H0z" />
                </clipPath>
            </defs>
        </svg>
    );
};

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