'use client';

import { X } from 'lucide-react';

interface Shortcut {
  keys: string[];
  description: string;
}

const shortcuts: Shortcut[] = [
  { keys: ['/'], description: 'Focus search' },
  { keys: ['Ctrl', 'G'], description: 'Go to dashboard' },
  { keys: ['?'], description: 'Show keyboard shortcuts' },
  { keys: ['Esc'], description: 'Close modal/dialog' },
];

export function KeyboardShortcutsHelp() {
  return (
    <dialog id="keyboard-shortcuts-help" className="modal">
      <div className="modal-box bg-gray-800 border border-gray-700">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-xl font-bold text-white">Keyboard Shortcuts</h3>
          <form method="dialog">
            <button className="btn btn-sm btn-circle btn-ghost text-gray-400 hover:text-white">
              <X className="h-4 w-4" />
            </button>
          </form>
        </div>
        
        <div className="space-y-3">
          {shortcuts.map((shortcut, index) => (
            <div key={index} className="flex items-center justify-between p-2 bg-gray-900 rounded">
              <span className="text-sm text-gray-300">{shortcut.description}</span>
              <div className="flex gap-1">
                {shortcut.keys.map((key, keyIndex) => (
                  <kbd
                    key={keyIndex}
                    className="px-2 py-1 text-xs font-semibold text-gray-300 bg-gray-700 border border-gray-600 rounded"
                  >
                    {key}
                  </kbd>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
      <form method="dialog" className="modal-backdrop">
        <button>close</button>
      </form>
    </dialog>
  );
}

