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

export type QuoteIconProps = 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 QuoteIcon = ({ title, size, color, ...props }: QuoteIconProps) => {
  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="M9.88 9.901H3.728v7.338h4.441c.938 0 1.713-.77 1.713-1.736V9.9Zm10.621 0h-6.154v7.338h4.442c.938 0 1.712-.77 1.712-1.736V9.9Zm-9.12 5.602c0 1.78-1.432 3.236-3.213 3.236H2.227V7.504c0-1.643 1.63-2.672 3.222-2.672h1.483v1.5H5.449c-1.137 0-1.722.688-1.722 1.172V8.4h7.654v7.102Zm10.62 0c0 1.78-1.431 3.236-3.212 3.236h-5.942V7.504c0-1.643 1.63-2.672 3.222-2.672h1.484v1.5h-1.484c-1.137 0-1.722.688-1.722 1.172V8.4H22v7.102Z" /></svg>
  );
};