import React from 'react';
import { Modal, Table } from 'react-bootstrap';
import type { KeyboardShortcut } from '../hooks/useKeyboardListNavigation';

type KeyboardShortcutsModalProps = {
  show: boolean;
  onHide: () => void;
  shortcuts: KeyboardShortcut[];
  title?: string;
};

const KeyboardShortcutsModal: React.FC<KeyboardShortcutsModalProps> = ({
  show,
  onHide,
  shortcuts,
  title = 'Keyboard Controls',
}) => {
  return (
    <Modal show={show} onHide={onHide} centered>
      <Modal.Header closeButton>
        <Modal.Title>{title}</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Table striped bordered hover size="sm" className="mb-0">
          <thead>
            <tr>
              <th style={{ width: '35%' }}>Key</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {shortcuts.map((shortcut) => (
              <tr key={`${shortcut.keys}-${shortcut.description}`}>
                <td>{shortcut.keys}</td>
                <td>{shortcut.description}</td>
              </tr>
            ))}
          </tbody>
        </Table>
      </Modal.Body>
    </Modal>
  );
};

export default KeyboardShortcutsModal;
