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

export type ManagementIconProps = 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 ManagementIcon = ({ title, size, color, ...props }: ManagementIconProps) => {
  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.5 17a1 1 0 1 0-2 0 1 1 0 0 0 2 0m6.5 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0m6.5 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0m-4.25-8.25a3.25 3.25 0 1 0-6.5 0 3.25 3.25 0 0 0 6.5 0m1.5 0a4.73 4.73 0 0 1-1.416 3.38l2.428 2.48A2.5 2.5 0 1 1 16 17c0-.572.194-1.097.517-1.518l-2.42-2.471c-.418.206-.87.354-1.347.43v1.173a2.501 2.501 0 1 1-1.5 0V13.44a4.71 4.71 0 0 1-1.349-.43l-2.419 2.472c.323.422.518.946.518 1.518a2.5 2.5 0 1 1-1.763-2.39l2.428-2.48a4.75 4.75 0 1 1 8.085-3.38" /></svg>
  );
};