src/components/forms/DocumentSelect.tsx

import type { ApiDocument } from "@/lib/api/types";

type DocumentSelectProps = {
  documents: ApiDocument[];
  selectedDocumentId: string;
  onChange: (documentId: string) => void;
  label?: string;
};

export function DocumentSelect({ documents, selectedDocumentId, onChange, label = "Choose source" }: DocumentSelectProps) {
  return (
    <label className="workspace-card block p-4">
      <span className="text-[13px] font-semibold text-[var(--text-primary)]">{label}</span>
      <select
        className="mt-2.5 h-10 w-full rounded-[var(--radius-sm)] border border-[var(--border-subtle)] bg-[var(--bg-root)] px-3 text-[13px] font-medium text-[var(--text-secondary)] outline-none transition focus:border-[var(--accent-primary)]"
        value={selectedDocumentId}
        onChange={(event) => onChange(event.target.value)}
      >
        {documents.map((document) => (
          <option key={document.id} value={document.id}>{document.title}</option>
        ))}
      </select>
    </label>
  );
}