app/components/DocumentSelector.js

"use client";

export default function DocumentSelector({
    documents,
    selectedDocIndex,
    selectedCorpus,
    onDocChange,
}) {
    const currentValue = selectedCorpus && selectedDocIndex != null
        ? `${selectedCorpus}:${selectedDocIndex}`
        : '';

    return (
        <div className="navigation-controls">
            <div className="select-group">
                <label htmlFor="doc-select">Document</label>
                <select
                    id="doc-select"
                    value={currentValue}
                    onChange={(e) => {
                        const [corpus, idx] = e.target.value.split(':');
                        onDocChange(corpus, parseInt(idx, 10));
                    }}
                >
                    {documents.map(doc => (
                        <option key={`${doc.corpus}:${doc.index}`} value={`${doc.corpus}:${doc.index}`}>
                            [{doc.corpus_name}] Doc {doc.index} ({doc.annotatable_pages.length} pages)
                        </option>
                    ))}
                </select>
            </div>
        </div>
    );
}