import type { ReportSummary } from "@/services/agenticApi";
import { formatDateTime } from "./utils";

interface ReportVersionSelectorProps {
  versions: ReportSummary[];
  selectedVersion?: number;
  disabled?: boolean;
  onSelect: (version: number) => void;
}

export function ReportVersionSelector({ versions, selectedVersion, disabled, onSelect }: ReportVersionSelectorProps) {
  if (versions.length === 0) {
    return <p className="text-xs text-slate-500">No report versions yet.</p>;
  }

  return (
    <label className="block space-y-1.5">
      <span className="text-xs font-medium text-slate-600">Report version</span>
      <select
        value={selectedVersion ?? ""}
        disabled={disabled}
        onChange={(event) => onSelect(Number(event.target.value))}
        className="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 disabled:bg-slate-50"
      >
        {versions.map((version) => (
          <option key={version.version} value={version.version}>
            v{version.version} - {formatDateTime(version.generated_at)}
          </option>
        ))}
      </select>
    </label>
  );
}