'use client'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Keyboard } from 'lucide-react'

const shortcuts = [
  { keys: ['n'], description: 'Nueva nota' },
  { keys: ['g', 'h'], description: 'Ir al Dashboard' },
  { keys: ['g', 'n'], description: 'Ir a Notas' },
  { keys: ['/'], description: 'Enfocar búsqueda' },
  { keys: ['?'], description: 'Mostrar atajos' },
  { keys: ['Ctrl', 'K'], description: 'Command Palette' },
]

export function KeyboardShortcutsDialog({ open, onOpenChange }: { open: boolean, onOpenChange: (o: boolean) => void }) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Keyboard className="h-5 w-5" />
            Atajos de teclado
          </DialogTitle>
        </DialogHeader>
        <div className="divide-y">
          {shortcuts.map((s) => (
            <div key={s.description} className="flex justify-between py-2">
              <span className="text-sm">{s.description}</span>
              <div className="flex gap-1">
                {s.keys.map((k) => (
                  <kbd key={k} className="px-2 py-1 bg-muted rounded text-xs">{k}</kbd>
                ))}
              </div>
            </div>
          ))}
        </div>
      </DialogContent>
    </Dialog>
  )
}