import { citationAnchor } from "../../lib/citations/inline";
import type { CitationView } from "../../lib/report/views";
import { cn } from "../../lib/utils";
import { CitationCard } from "./CitationCard";

// A NUMBERED REFERENCE LIST — a report's citations (or one section's), in
// number order, each entry a CitationCard (`reference`) under the number the
// inline markers show. The report-wide list carries the anchors `c-<id>` the
// markers jump to; a per-section list passes `anchors={false}` so an id is on
// the page once.
//
// Pure: the citations come in as props, already numbered (lib/report/views.ts
// orderedCitations / sectionCitations).

export function ReferenceList({
  citations,
  anchors = true,
  className,
  addedLabel,
}: {
  citations: readonly CitationView[];
  anchors?: boolean;
  className?: string;
  // The words behind an added citation's mark (CitationCard).
  addedLabel?: string;
}) {
  if (citations.length === 0) return null;
  return (
    <ol data-reference-list="" className={cn("flex flex-col divide-y divide-border", className)}>
      {citations.map((c) => (
        <li
          key={c.id}
          id={anchors ? citationAnchor(c.id) : undefined}
          value={c.number}
          data-reference={c.id}
          className="flex scroll-mt-20 gap-3 py-3 target:bg-brand-soft/60 target:rounded-md"
        >
          <span className="w-7 shrink-0 pt-0.5 text-right font-mono text-sm font-semibold text-brand-strong">
            {c.number !== undefined ? `${c.number}.` : "·"}
          </span>
          <CitationCard citation={c} variant="reference" className="flex-1" addedLabel={addedLabel} />
        </li>
      ))}
    </ol>
  );
}