import React, { useState, useMemo } from 'react';
import './ShortcutPanel.css';

const DEFAULT_ITEMS = [
  { name: '保存', key: 'Ctrl + S' },
  { name: '搜索', key: 'Ctrl + K' },
  { name: '新建', key: 'Ctrl + N' },
  { name: '刷新', key: 'F5' },
  { name: '关闭页签', key: 'Ctrl + W' },
  { name: '全屏', key: 'F11' },
  { name: '帮助', key: '?' },
  { name: '命令面板', key: 'Ctrl + P' }
];

export default function ShortcutPanel({ items = DEFAULT_ITEMS }) {
  const [q, setQ] = useState('');
  const filtered = useMemo(() => {
    const s = q.trim().toLowerCase();
    if (!s) return items;
    return items.filter((it) => it.name.toLowerCase().indexOf(s) >= 0 || it.key.toLowerCase().indexOf(s) >= 0);
  }, [q, items]);

  return (
    <div className="aa-shortcut">
      <input className="aa-shortcut-search" value={q} placeholder="搜索快捷键…" onChange={(e) => setQ(e.target.value)} />
      <div className="aa-shortcut-list">
        {!filtered.length && <div className="aa-shortcut-empty">无匹配快捷键</div>}
        {filtered.map((it, i) => (
          <div key={i} className="aa-shortcut-item">
            <span>{it.name}</span>
            <span className="aa-shortcut-key">{it.key}</span>
          </div>
        ))}
      </div>
    </div>
  );
}