import { useId, type SVGProps } from 'react';

export type NetworkIconProps = SVGProps<SVGSVGElement> & {
  /** Accessibility title for the icon, set aria-hidden="true" if the icon is purely decorative. */
  title?: string;
  /**
   * The size of the icon.
   * It sets the font-size, possible as the width and height is `1em`. If not set, the icon will inherit the font size of its parent.
   */
  size?: '2xl' | 'xl' | 'large' | 'medium' | 'small';
  /**
   * The color of the icon.
   * @default 'inherit'
   */
  color?: 'inherit' | 'primary' | 'gray' | 'black' | 'white';
};

export const NetworkIcon = ({ title, size, color, ...props }: NetworkIconProps) => {
  const titleId = useId();
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" focusable='false' role='img' width='1em' height='1em'  aria-labelledby={title ? titleId : undefined} data-size={size} data-color={color} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path d="M6 18.5a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0m6.75 0a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0m6-1.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0m-4.5-5.125a2.25 2.25 0 1 0-4.5 0 2.25 2.25 0 0 0 4.5 0m4.75-5.5a1.375 1.375 0 1 0-2.75 0 1.375 1.375 0 0 0 2.75 0M6.95 5.8a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0m1.5 0c0 .348-.082.676-.223.97l1.709 1.724A3.73 3.73 0 0 1 12 7.875c.764 0 1.475.229 2.067.621l1.02-1.02A2.875 2.875 0 1 1 17.625 9a2.854 2.854 0 0 1-1.509-.43l-.988.988c.393.593.622 1.303.622 2.068a3.74 3.74 0 0 1-.371 1.627l1.55 1.518a2.25 2.25 0 1 1-1.006 1.113l-1.462-1.43a3.735 3.735 0 0 1-1.711.847v1.08a2.248 2.248 0 0 1-.75 4.37 2.25 2.25 0 0 1-.75-4.37V15.3a3.73 3.73 0 0 1-1.277-.522l-2.696 2.75a2.25 2.25 0 1 1-1.063-1.06l2.684-2.736a3.73 3.73 0 0 1-.648-2.107c0-.766.23-1.478.623-2.071L7.164 7.83c-.292.14-.618.22-.964.22A2.25 2.25 0 1 1 8.45 5.8" /></svg>
  );
};