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

const Phone = (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 clipPath={`url(#${id})`}>
                <path
                    fill={fill}
                    d="M18.175 23c-1.24 0-2.415 0-5.26-1.165A20.8 20.8 0 0 1 6.46 17.55a20.9 20.9 0 0 1-4.295-6.46C1 8.235 1 7.065 1 5.82c0-.855.33-1.66.93-2.265l1.9-1.9.52.52-.515-.525a2.213 2.213 0 0 1
                    3.135.01l3.175 3.17c.88.895.86 2.29 0 3.14l-1.49 1.49a.42.42 0 0 0-.06.48c.29.515.625 1.03.99 1.515.425.545.895 1.09 1.385 1.6.485.465 1.03.935 1.59 1.37.475.355.99.69
                    1.515.99.15.08.345.05.475-.075l1.485-1.49c.895-.88 2.295-.86 3.14 0l3.17 3.175c.44.45.66 1.005.655 1.59a2.2 2.2 0 0 1-.66 1.55l-1.895 1.895c-.605.605-1.41.94-2.265.94zM4.35 2.175l.52.52-1.9
                    1.9a1.74 1.74 0 0 0-.505 1.23c0 1.145 0 2.13 1.055 4.71.94 2.23 2.28 4.245 3.975 5.985a19.3 19.3 0 0 0 5.98 3.965c2.57 1.05 3.555 1.05 4.7 1.05.465 0 .9-.18 1.23-.51l1.9-1.9a.73.73 0 0 0
                    .015-1.04l-3.195-3.2a.73.73 0 0 0-1.04-.015l-1.51 1.515a1.89 1.89 0 0 1-2.21.315q-.899-.51-1.7-1.11a22 22 0 0 1-1.735-1.5q-.819-.854-1.51-1.745a15.5 15.5 0 0 1-1.11-1.7 1.88 1.88 0 0 1
                    .295-2.21L9.11 6.93a.73.73 0 0 0 .015-1.04l-3.2-3.195a.73.73 0 0 0-1.04-.015l-.535-.5z"
                />
                <path
                    stroke={stroke}
                    strokeWidth={0.4}
                    d="m4.35 2.175-.52-.52-1.9 1.9C1.33 4.16 1 4.965 1 5.82c0 1.245 0 2.415 1.165 5.27a20.9 20.9 0 0 0 4.295 6.46 20.8 20.8 0 0 0 6.455 4.285C15.76 23 16.935 23 18.175 23h.005c.855 0 1.66-.335
                    2.265-.94l1.895-1.895c.42-.415.655-.965.66-1.55a2.22 2.22 0 0 0-.655-1.59l-3.17-3.175c-.845-.86-2.245-.88-3.14 0l-1.485 1.49a.41.41 0 0 1-.475.075 15 15 0 0 1-1.515-.99 21 21 0 0 1-1.59-1.37 21
                    21 0 0 1-1.385-1.6c-.365-.485-.7-1-.99-1.515a.42.42 0 0 1 .06-.48l1.49-1.49c.86-.85.88-2.245 0-3.14L6.97 1.66a2.213 2.213 0 0 0-3.135-.01zm0 0 .52.52-1.9 1.9a1.74 1.74 0 0 0-.505 1.23c0 1.145 0
                    2.13 1.055 4.71.94 2.23 2.28 4.245 3.975 5.985a19.3 19.3 0 0 0 5.98 3.965c2.57 1.05 3.555 1.05 4.7 1.05.465 0 .9-.18 1.23-.51l1.9-1.9a.73.73 0 0 0 .015-1.04l-3.195-3.2a.73.73 0 0
                    0-1.04-.015l-1.51 1.515a1.89 1.89 0 0 1-2.21.315q-.899-.51-1.7-1.11a22 22 0 0 1-1.735-1.5q-.819-.854-1.51-1.745a15.5 15.5 0 0 1-1.11-1.7 1.88 1.88 0 0 1 .295-2.21L9.11 6.93a.73.73 0 0 0
                    .015-1.04l-3.2-3.195a.73.73 0 0 0-1.04-.015l-.535-.5z"
                />
            </g>
            <defs>
                <clipPath id={id}>
                    <path fill="#fff" d="M0 0h24v24H0z" />
                </clipPath>
            </defs>
        </svg>
    );
};

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