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

export type PanoptoIconProps = 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 PanoptoIcon = ({ title, size, color, ...props }: PanoptoIconProps) => {
  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="M20 14.871V8.756c0-.389.005-.722-.104-1.143a3.2 3.2 0 0 0-.813-1.434c-.29-.296-.58-.472-.894-.657l-2.8-1.712c-.214-.13-.427-.263-.636-.384a3.08 3.08 0 0 0-1.63-.425c-.844.032-1.334.324-1.956.694l-5.36 3.122c-.128.074-.26.148-.373.222a3.3 3.3 0 0 0-.594.505 3.18 3.18 0 0 0-.754 1.434c-.09.402-.086.79-.086 1.165v3.604c0 .232 0 .472.005.69.036.828.385 1.6.98 2.17.304.286.63.471.971.665l4.458 2.596c.308.18.617.36.917.532l.086.05c.163.098.327.195.495.273a3.064 3.064 0 0 0 2.71-.078c.194-.102.435-.255.658-.394l2.914-1.78c.204-.12.413-.25.594-.394.313-.25.577-.56.776-.911.436-.773.431-1.513.427-2.29zM5.312 9.972c0-.277 0-.495.068-.75.09-.337.272-.637.531-.873a3.02 3.02 0 0 1 .554-.37L9.75 6.068c-.05.342-.045.685-.045 1.022v7.855l-.26.148-.839.477c-.513.291-.894.486-1.448.495a2.13 2.13 0 0 1-1.12-.306 1.46 1.46 0 0 1-.223-.194 1.833 1.833 0 0 1-.495-1.055 5 5 0 0 1-.014-.596V9.977l.005-.005Zm5.71-.245 3.445 2.04c.136.084.272.167.409.245-.028.019-.055.033-.087.051l-1.18.671c-.227.12-.458.255-.69.389l-1.902 1.082V9.732zm6.318 3.733a2.54 2.54 0 0 1 1.244 1.573c.15.546.109 1-.132 1.434a1.87 1.87 0 0 1-.476.56 4.7 4.7 0 0 1-.495.32l-2.86 1.748c-.2.125-.417.264-.599.36a1.752 1.752 0 0 1-1.566.055 3.3 3.3 0 0 1-.354-.193l-2.955-1.72-.74-.436c.264-.102.486-.226.781-.393l5.978-3.39c.345-.2.694-.399 1.04-.588zm-4.235-4.047-1.638-.972c-.15-.088-.309-.185-.45-.264V7.22c-.031-.87.041-1.48.495-2.031.386-.463.98-.786 1.552-.842.064 0 .123-.005.182 0 .24.01.472.065.694.167.137.064.336.19.495.286l2.85 1.74c.21.125.441.259.609.38a1.865 1.865 0 0 1 .749 1.147c.045.217.04.508.04.763v3.978a5.9 5.9 0 0 0-.898-.62l-4.684-2.766.004-.01Z" /></svg>
  );
};