/**
 * KeyboardShortcutHint - компонент для отображения подсказок по горячим клавишам
 * Используется внутри кнопок и других элементов
 */
function KeyboardShortcutHint({ shortcut, className = '' }) {
  if (!shortcut) return null

  // Разбиваем комбинацию клавиш на части
  const keys = shortcut.split('+').map(k => k.trim())

  return (
    <span className={`keyboard-shortcut-hint ${className}`}>
      {keys.map((key, index) => (
        <kbd key={index} className="kbd">
          {key}
        </kbd>
      ))}
      
      <style jsx>{`
        .keyboard-shortcut-hint {
          display: inline-flex;
          align-items: center;
          gap: 0.25rem;
          margin-left: 0.5rem;
          opacity: 0.7;
        }
        
        .kbd {
          background: rgba(0, 0, 0, 0.05);
          border: 1px solid rgba(0, 0, 0, 0.1);
          border-radius: 0.25rem;
          padding: 0.125rem 0.375rem;
          font-size: 0.75rem;
          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          font-weight: 500;
          line-height: 1;
          box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
        }
        
        @media (prefers-color-scheme: dark) {
          .kbd {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
          }
        }
        
        /* Скрываем на мобильных */
        @media (max-width: 768px) {
          .keyboard-shortcut-hint {
            display: none;
          }
        }
      `}</style>
    </span>
  )
}

/**
 * ShortcutsList - компонент для отображения списка горячих клавиш
 * Используется в модальных окнах помощи
 */
function ShortcutsList({ shortcuts }) {
  return (
    <div className="shortcuts-list">
      {shortcuts.map((shortcut, index) => (
        <div key={index} className="shortcut-item">
          <span className="shortcut-description">{shortcut.description}</span>
          <KeyboardShortcutHint shortcut={shortcut.keys} />
        </div>
      ))}
      
      <style jsx>{`
        .shortcuts-list {
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
        }
        
        .shortcut-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0.5rem;
          border-radius: 0.25rem;
          transition: background-color 0.15s ease;
        }
        
        .shortcut-item:hover {
          background-color: rgba(0, 0, 0, 0.02);
        }
        
        .shortcut-description {
          flex: 1;
          color: var(--tblr-body-color);
        }
        
        @media (prefers-color-scheme: dark) {
          .shortcut-item:hover {
            background-color: rgba(255, 255, 255, 0.05);
          }
        }
      `}</style>
    </div>
  )
}

export { KeyboardShortcutHint, ShortcutsList }
export default KeyboardShortcutHint