"use client";

import { PrecedentCard } from "@/components/compose/precedent-card";
import { PrecedentAttacher } from "@/components/compose/precedent-attacher";
import type { CasePrecedent } from "@/lib/api/precedents";
import type { PracticeArea } from "@/lib/practice-area";

/*
 * Wrapper that renders the list of precedents for one scope — either
 * case-level (sectionId=null) or a specific threshold_claim / issue.
 * The parent page fetches useCasePrecedents(caseNumber) once and
 * passes a pre-filtered slice down, so each section doesn't re-query.
 */

export function PrecedentsSection({
  caseNumber,
  sectionId,
  precedents,
  practiceArea,
  emptyHelperText,
}: {
  caseNumber: string;
  sectionId: string | null;
  precedents: CasePrecedent[];
  practiceArea: PracticeArea | null | undefined;
  emptyHelperText?: string;
}) {
  return (
    <div className="space-y-3">
      {precedents.length === 0 ? (
        emptyHelperText && (
          <p className="text-[0.78rem] text-ink-muted">{emptyHelperText}</p>
        )
      ) : (
        <ul className="space-y-2">
          {precedents.map((p) => (
            <li key={p.id}>
              <PrecedentCard caseNumber={caseNumber} precedent={p} />
            </li>
          ))}
        </ul>
      )}
      <PrecedentAttacher
        caseNumber={caseNumber}
        sectionId={sectionId}
        practiceArea={practiceArea}
      />
    </div>
  );
}