import styles from './ShortcutsBar.module.css'
import { KeyboardHint } from '../../primitives/KeyboardHint/KeyboardHint'

interface Shortcut {
  keys: string
  label: string
}

interface ShortcutsBarProps {
  shortcuts: Shortcut[]
  className?: string
}

export function ShortcutsBar({ shortcuts, className }: ShortcutsBarProps) {
  if (shortcuts.length === 0) return null

  return (
    <div className={`${styles.bar} ${className ?? ''}`}>
      {shortcuts.map((shortcut, index) => (
        <div key={index} className={styles.hint}>
          <KeyboardHint keys={shortcut.keys} />
          <span className={styles.label}>{shortcut.label}</span>
        </div>
      ))}
    </div>
  )
}
