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

export type ThumbDownIconProps = 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 ThumbDownIcon = ({ title, size, color, ...props }: ThumbDownIconProps) => {
  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="M10.846 16.207c0 .47.189.92.524 1.251.23.228.519.386.83.463l2.858-5.655V5.02H5.97a.523.523 0 0 0-.515.45l-.952 7.533a.51.51 0 0 0 .302.533c.067.03.14.045.214.045h5.076c.414 0 .75.333.75.742v1.884ZM19.5 5.02h-2.942v6.678H19.5zM9.346 15.065H5.019l-.214-.011a2.035 2.035 0 0 1-1.3-.665 1.993 1.993 0 0 1-.49-1.57l.953-7.534v-.001c.061-.483.3-.927.668-1.248a2.03 2.03 0 0 1 1.151-.491l.184-.009h13.644c.367 0 .72.144.98.401s.405.606.405.97v6.905c0 .364-.146.712-.405.968l-.102.091c-.246.2-.556.31-.878.31h-3.343l-2.966 5.868a.752.752 0 0 1-.671.41 3.308 3.308 0 0 1-2.325-.952 3.237 3.237 0 0 1-.964-2.3z" /></svg>
  );
};