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="M7.438 20c-1.048 0-1.887-.304-2.517-.911Q4 18.1785 4 16.644c0-1.081.322-1.918.966-2.51.66-.608 1.626-.912 2.9-.912H9.19v-2.444H7.865c-1.273 0-2.24-.296-2.899-.89C4.322 9.282 4 8.438 4 7.357c0-1.023.307-1.837.921-2.445Q5.866 4 7.438 4c.84 0 1.498.156 1.978.467a2.47 2.47 0 0 1 1.033 1.244 4.52 4.52 0 0 1 .315 1.711v1.845h2.472V7.422c0-.622.097-1.192.292-1.71a2.63 2.63 0 0 1 1.034-1.245c.494-.311 1.16-.467 2-.467 1.048 0 1.88.304 2.494.911.63.608.944 1.422.944 2.445 0 1.081-.322 1.925-.966 2.533-.644.593-1.61.889-2.9.889H14.81v2.444h1.326c1.288 0 2.255.304 2.899.911q.966.8895.966 2.511c0 1.023-.315 1.838-.944 2.445-.614.607-1.446.911-2.494.911-.84 0-1.506-.156-2-.467a2.63 2.63 0 0 1-1.034-1.244 4.83 4.83 0 0 1-.292-1.711v-1.845h-2.472v1.845a4.51 4.51 0 0 1-.315 1.71 2.47 2.47 0 0 1-1.033 1.245c-.48.311-1.139.467-1.978.467ZM14.81 7.378v1.889h1.326c.794 0 1.37-.156 1.73-.467.36-.326.54-.807.54-1.444 0-.652-.18-1.119-.54-1.4-.344-.282-.779-.423-1.303-.423-.585 0-1.026.17-1.326.511-.285.326-.427.77-.427 1.334M7.865 9.267h1.326v-1.89c0-.562-.15-1.007-.45-1.333-.284-.34-.719-.51-1.303-.51-.524 0-.966.14-1.326.422-.344.281-.516.748-.516 1.4 0 .637.18 1.118.539 1.444.36.311.936.467 1.73.467m2.899 3.955h2.472v-2.444h-2.472zm-3.326 5.245c.584 0 1.019-.163 1.304-.49.3-.34.449-.792.449-1.355v-1.889H7.865c-.794 0-1.37.163-1.73.49-.36.31-.54.784-.54 1.421 0 .652.173 1.119.517 1.4q.54.423 1.326.423m7.371-1.845c0 .563.142 1.015.427 1.356.3.326.741.489 1.326.489.524 0 .959-.141 1.303-.423.36-.281.54-.748.54-1.4 0-.637-.18-1.11-.54-1.422-.36-.326-.936-.489-1.73-.489h-1.326v1.89Z" /></svg>
  );
};