import React from 'react';
import { clsx } from 'clsx';

export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
  children: React.ReactNode;
}

/**
 * Keyboard shortcut display component
 */
export const Kbd = React.forwardRef<HTMLElement, KbdProps>(
  ({ children, className, ...props }, ref) => {
    return (
      <kbd
        ref={ref}
        className={clsx(
          'px-2 py-1 text-xs font-semibold',
          'bg-muted border border-border rounded',
          'shadow-sm',
          className
        )}
        {...props}
      >
        {children}
      </kbd>
    );
  }
);
Kbd.displayName = 'Kbd';