/**
 * @file Renders a platform-aware keyboard shortcut badge.
 *
 * Designed to be composable within tooltips, buttons, and menu items.
 */

import React from 'react';
import PropTypes from 'prop-types';
import { formatShortcutDisplay } from '../../utils/shortcuts';

const defaultStyle = {
  display: 'inline-flex',
  alignItems: 'center',
  gap: '2px',
  padding: '2px 6px',
  borderRadius: '4px',
  fontSize: '12px',
  lineHeight: '16px',
  fontFamily:
    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
  fontWeight: 500,
  color: 'var(--shortcut-hint-color, #6b7280)',
  backgroundColor: 'var(--shortcut-hint-bg, #f3f4f6)',
  border: '1px solid var(--shortcut-hint-border, #e5e7eb)',
  whiteSpace: 'nowrap',
  userSelect: 'none',
};

/**
 * @param {Object} props
 * @param {string} props.keys - Shortcut string (e.g. 'mod+k')
 * @param {React.CSSProperties} [props.style] - Override styles
 * @param {string} [props.className] - Additional CSS class
 */
export function ShortcutHint({ keys, style, className }) {
  const display = formatShortcutDisplay(keys);

  return (
    <kbd
      className={className}
      style={{ ...defaultStyle, ...style }}
      aria-label={`Keyboard shortcut: ${display}`}
    >
      {display}
    </kbd>
  );
}

ShortcutHint.propTypes = {
  keys: PropTypes.string.isRequired,
  style: PropTypes.object,
  className: PropTypes.string,
};
