import type { MilestoneId } from "../../data/milestones";
import { TransformerAnimation } from "../TransformerAnimation";
import { AttentionLoop } from "./AttentionLoop";
import { LlmLoop } from "./LlmLoop";
import { MlpLoop } from "./MlpLoop";
import { RnnLoop } from "./RnnLoop";
import { VlmLoop } from "./VlmLoop";

export function ArchitectureLoop({
  id,
  onSelect,
}: {
  id: MilestoneId;
  onSelect: (id: string) => void;
}) {
  switch (id) {
    case "mlp":
      return <MlpLoop onSelect={onSelect} />;
    case "rnn":
      return <RnnLoop onSelect={onSelect} />;
    case "attention":
      return <AttentionLoop onSelect={onSelect} />;
    case "transformer":
      return <TransformerAnimation onSelect={onSelect} />;
    case "llm":
      return <LlmLoop onSelect={onSelect} />;
    case "vlm":
      return <VlmLoop onSelect={onSelect} />;
  }
}