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

export type GroupUnitIconProps = 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 GroupUnitIcon = ({ title, size, color, ...props }: GroupUnitIconProps) => {
  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 fillRule="evenodd" d="M8.528 5.259a2.003 2.003 0 0 0-2.001 2c0 1.104.897 2.002 2 2.002h.006v1.5c-2.178 0-4.018 1.74-4.018 3.738h-1.5c0-2.073 1.313-3.84 3.112-4.692a3.492 3.492 0 0 1-1.1-2.547 3.503 3.503 0 0 1 3.5-3.501 3.503 3.503 0 0 1 3.502 3.5h-1.5a2.003 2.003 0 0 0-2.001-2m3.444 4.497a3.503 3.503 0 0 1 3.5-3.501 3.503 3.503 0 0 1 3.502 3.5 3.492 3.492 0 0 1-1.1 2.547c1.802.852 3.117 2.619 3.117 4.693h-1.5c0-1.998-1.84-3.738-4.018-3.738v-1.5a2.003 2.003 0 0 0 2-2.001 2.003 2.003 0 0 0-2-2.001 2.003 2.003 0 0 0-2.001 2h-1.5Zm-.703 2.008a1.996 1.996 0 1 0 0 3.992 1.996 1.996 0 0 0 0-3.992M7.773 13.76a3.496 3.496 0 1 1 5.894 2.543c1.8.85 3.115 2.614 3.115 4.686h-1.5c0-1.992-1.835-3.728-4.013-3.728-2.175 0-4.013 1.737-4.013 3.729h-1.5c0-2.073 1.315-3.836 3.115-4.686a3.486 3.486 0 0 1-1.098-2.544" clipRule="evenodd" /></svg>
  );
};