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

export type ThumbUpIconProps = 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 ThumbUpIcon = ({ title, size, color, ...props }: ThumbUpIconProps) => {
  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="M13.154 6.79c0-.47-.189-.92-.524-1.252a1.79 1.79 0 0 0-.83-.462L8.942 10.73v7.245h9.087a.522.522 0 0 0 .515-.449l.952-7.533v-.001a.51.51 0 0 0-.302-.533.525.525 0 0 0-.213-.045h-5.077a.746.746 0 0 1-.75-.742zM4.5 17.975h2.942V11.3H4.5v6.677ZM14.654 7.931h4.327l.214.012a2.036 2.036 0 0 1 1.3.664 1.994 1.994 0 0 1 .49 1.571l-.953 7.534c-.061.483-.3.927-.668 1.249a2.03 2.03 0 0 1-1.151.49l-.184.01H4.385c-.367 0-.72-.145-.98-.402A1.363 1.363 0 0 1 3 18.09v-6.906c0-.363.146-.711.405-.968l.102-.09c.246-.2.556-.311.878-.311h3.344l2.965-5.868a.752.752 0 0 1 .671-.41c.872 0 1.709.342 2.325.952.617.61.964 1.438.964 2.3z" /></svg>
  );
};