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

export type NotificationMutedIconProps = 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 NotificationMutedIcon = ({ title, size, color, ...props }: NotificationMutedIconProps) => {
  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="M8.25 10.125c0-2.07 1.68-3.75 3.75-3.75.72 0 1.395.21 1.965.565l1.08-1.08c-.605-.43-1.3-.74-2.06-.885 0-.03.01-.065.01-.095 0-.55-.45-1-1-1s-1 .45-1 1c0 .035.005.065.01.095a5.253 5.253 0 0 0-4.26 5.155v4.03l1.505-1.505zM5 15.875v.03l.03-.03zm14 0c-.965 0-1.75-.785-1.75-1.75v-4c0-.675-.135-1.32-.37-1.91l2.11-2.11-1.06-1.06L5 17.975l1.06 1.06 1.655-1.655h2.19c-.02.125-.035.25-.035.375a2.13 2.13 0 0 0 2.125 2.125 2.13 2.13 0 0 0 2.125-2.125c0-.125-.015-.25-.035-.375h4.91v-1.5zm-7 2.5a.625.625 0 0 1-.5-1h1a.625.625 0 0 1-.5 1m-2.775-2.5L15.68 9.42c.045.23.075.46.075.705v4c0 .645.19 1.245.51 1.75z" /></svg>
  );
};