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

export type LawIconProps = 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 LawIcon = ({ title, size, color, ...props }: LawIconProps) => {
  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="M12.752 9.756v8.986h2.745v1.5h-6.99v-1.5h2.745V9.756zm-.75-5.369c.908 0 1.681.572 1.984 1.374h6.504v1.5h-2.542l2.7 5.242.082.162v.181c0 1.808-1.627 3.152-3.311 3.152a3.16 3.16 0 0 1-3.161-3.161v-.182l.083-.162 2.69-5.232h-3.045a2.121 2.121 0 0 1-3.968 0H6.965l2.7 5.242.083.162v.181c0 1.808-1.628 3.152-3.311 3.152a3.16 3.16 0 0 1-3.163-3.161v-.182l.083-.162 2.69-5.232H3.515v-1.5h6.503a2.122 2.122 0 0 1 1.984-1.374m-7.22 8.616a1.66 1.66 0 0 0 1.654 1.495c.92 0 1.705-.697 1.8-1.49l-1.73-3.362-1.725 3.357ZM15.765 13a1.66 1.66 0 0 0 1.653 1.497c.92 0 1.705-.697 1.8-1.49l-1.73-3.36L15.766 13Zm-3.764-7.114a.623.623 0 1 0 0 1.247.623.623 0 0 0 0-1.247" /></svg>
  );
};