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

export type KeystrokeCommandIconProps = 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 KeystrokeCommandIcon = ({ title, size, color, ...props }: KeystrokeCommandIconProps) => {
  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="M18.991 17.045a1.948 1.948 0 0 0-1.946-1.946h-1.946v1.946c0 1.073.872 1.946 1.946 1.946a1.948 1.948 0 0 0 1.946-1.946m-10.09-1.951H6.955A1.948 1.948 0 0 0 5.01 17.04c0 1.074.872 1.946 1.946 1.946a1.948 1.948 0 0 0 1.946-1.946v-1.946Zm1.505-1.5h3.188v-3.188h-3.188zm-1.5-6.634A1.948 1.948 0 0 0 6.96 5.014 1.948 1.948 0 0 0 5.014 6.96c0 1.074.872 1.946 1.946 1.946h1.946zm10.08-.005A1.948 1.948 0 0 0 17.04 5.01a1.948 1.948 0 0 0-1.946 1.946v1.946h1.946a1.948 1.948 0 0 0 1.946-1.946Zm1.5 0a3.448 3.448 0 0 1-3.446 3.446h-1.946V13.6h1.95a3.448 3.448 0 0 1 3.447 3.446 3.448 3.448 0 0 1-3.446 3.446 3.448 3.448 0 0 1-3.446-3.446v-1.951H10.4v1.946a3.448 3.448 0 0 1-3.446 3.446A3.448 3.448 0 0 1 3.51 17.04a3.448 3.448 0 0 1 3.446-3.446h1.951v-3.188H6.96A3.448 3.448 0 0 1 3.514 6.96 3.448 3.448 0 0 1 6.96 3.514a3.448 3.448 0 0 1 3.446 3.446v1.946h3.188v-1.95a3.448 3.448 0 0 1 3.446-3.447 3.448 3.448 0 0 1 3.446 3.446" /></svg>
  );
};