import type { ResolveEvidenceAsset } from "../../../domain/public-render-content.ts";
import { PublicEvidenceFigure } from "./evidence-figure.tsx";

const diagramAlt =
  "Fetch Join은 전체 조인 결과를 읽은 뒤 메모리에서 20개를 고르고, Batch Fetch는 부모 20개를 먼저 고른 뒤 해당 ID의 컬렉션만 조회한다.";

export function EvidenceFigure({
  resolveEvidenceAsset,
}: {
  resolveEvidenceAsset: ResolveEvidenceAsset;
}) {
  return (
    <PublicEvidenceFigure
      evidenceKey="fetch-strategy-boundary"
      alt={diagramAlt}
      caption="페이징이 적용된 지점이 부모 조회 앞으로 이동한다."
      zoom
      resolveEvidenceAsset={resolveEvidenceAsset}
    />
  );
}