import type { Capability, CapabilityId } from "../../protocol/model";

export function CapabilityPanel({ declared, catalog, onSelect }: { declared: readonly CapabilityId[]; catalog: readonly Capability[]; onSelect?: (capability: Capability) => void }) {
  const visible = catalog.filter((capability) => declared.includes(capability.capability_id));
  return <section aria-labelledby="capabilities"><h3 id="capabilities">Capability</h3>{visible.length === 0 ? <p className="empty-state">服务端未声明可用操作</p> : <ul className="card-list">{visible.map((capability) => <li key={capability.capability_id}><div><strong>{capability.name}</strong><small>{capability.description ?? capability.capability_id}</small></div>{onSelect && <button onClick={() => onSelect(capability)}>打开操作</button>}</li>)}</ul>}</section>;
}