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 => {
                        const title = doc.original_name || `Doc ${doc.index}`;
                        const limit = 40;
                        const truncated = title.length > limit ? title.substring(0, limit) + '...' : title;
                        return (
                            <option key={`${doc.corpus}:${doc.index}`} value={`${doc.corpus}:${doc.index}`}>
                                [{doc.corpus_name}] {truncated} ({doc.annotatable_pages.length} pages)
                            </option>
                        );
                    })}
                </select>
            </div>
        </div>
    );
}