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

export type FigmaLogoIconProps = 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 FigmaLogoIcon = ({ title, size, color, ...props }: FigmaLogoIconProps) => {
  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 fillRule="evenodd" d="M11.2001 3.28h-2.36c-1.3034 0-2.36 1.0566-2.36 2.36S7.5367 8 8.84 8h2.36zm0-1.6h3.96c2.1871 0 3.9599 1.773 3.9599 3.96 0 1.2906-.6173 2.437-1.573 3.16.9557.723 1.573 1.8694 1.573 3.16 0 2.187-1.7728 3.96-3.9599 3.96a3.943 3.943 0 0 1-2.36-.7797V18.28c0 2.187-1.773 3.96-3.96 3.96s-3.96-1.773-3.96-3.96c0-1.2907.6174-2.4371 1.573-3.16-.9556-.723-1.573-1.8694-1.573-3.16s.6174-2.437 1.573-3.16c-.9556-.723-1.573-1.8694-1.573-3.16 0-2.187 1.773-3.96 3.96-3.96zm1.6 1.6V8h2.36C16.4635 8 17.52 6.9434 17.52 5.64s-1.0565-2.36-2.3599-2.36zm-3.96 11.04h2.36V9.5999h-2.36c-1.3034 0-2.36 1.0567-2.36 2.3601 0 1.3003 1.0515 2.3549 2.3506 2.36zm-2.36 3.96c0-1.3003 1.0515-2.355 2.3506-2.36h2.3694v2.36c0 1.3034-1.0566 2.36-2.36 2.36s-2.36-1.0566-2.36-2.36m6.32-6.3247c.0025-1.3012 1.0582-2.3553 2.36-2.3553 1.3034 0 2.3599 1.0566 2.3599 2.36s-1.0565 2.36-2.3599 2.36c-1.3018 0-2.3575-1.0541-2.36-2.3553z" clipRule="evenodd" /></svg>
  );
};