// Exercise 2: identify valid Server/Client composition
//
// Given short descriptions of file setups, mark each as VALID or
// INVALID according to the rule: a Client Component ("use client")
// file must NOT directly import a Server Component; passing a Server
// Component as `children`/a prop from a Server Component parent is fine.
//
// Fill in `verdicts` with "VALID" or "INVALID" for each numbered case:
//
// 1. ServerPage.tsx (no directive) imports ClientButton.tsx ("use client")
//    and renders <ClientButton />.
//
// 2. ClientPanel.tsx ("use client") imports ServerWidget.tsx (no directive)
//    and renders <ServerWidget /> directly inside its own JSX.
//
// 3. ServerPage.tsx (no directive) renders <ClientWrapper><ServerWidget />
//    </ClientWrapper> — ClientWrapper.tsx ("use client") only reads
//    `children` from props, it never imports ServerWidget itself.
//
// 4. ClientForm.tsx ("use client") imports a plain utility function
//    `formatDate` from a file with no directive, and calls it.

type Verdict = "VALID" | "INVALID";

const verdicts: Record<1 | 2 | 3 | 4, Verdict> = {
  1: "VALID", // given as an example — Server importing Client is always fine
  2: "VALID", // TODO: fix this — is a Client Component allowed to import a Server Component directly?
  3: "VALID", // TODO: confirm — passing Server Components as children through a Client wrapper
  4: "VALID", // TODO: confirm — importing a plain non-component utility function
};

// --- self-check: do not modify below this line ---
const expected: Record<1 | 2 | 3 | 4, Verdict> = {
  1: "VALID",
  2: "INVALID",
  3: "VALID",
  4: "VALID",
};

let allPass = true;
for (const key of [1, 2, 3, 4] as const) {
  const pass = verdicts[key] === expected[key];
  if (!pass) allPass = false;
  console.log(`case ${key}: ${verdicts[key]} (expected ${expected[key]}) — ${pass ? "PASS" : "FAIL"}`);
}
console.log(allPass ? "ALL PASS" : "SOME FAILED");