// Exercise 3: mount a real app and observe the render/commit split
//
// This exercise is meant to be dropped into a Vite React+TS project as
// main.tsx (or imported from it). It has no automated self-check because
// it is fundamentally about observing render order in the browser console.
//
// TASK:
// 1. Implement <App /> to render a <Header /> and a <Body />.
// 2. Each of Header, Body, and App should console.log a line when its
//    function body runs, e.g. "rendering Header".
// 3. Add a useEffect (imported from "react") inside Body that logs
//    "Body committed" — this runs AFTER the commit phase, not during render.
//
// WHAT TO VERIFY VISUALLY / IN THE CONSOLE when this actually mounts:
//   - The three "rendering X" logs appear first, in render order
//     (App, then Header, then Body — parents render before children call
//     happens as React walks down, but ALL of them are render-phase work).
//   - "Body committed" appears LAST, after all three render logs — proving
//     the commit phase (and effects that run after it) happens only once
//     rendering has fully finished, never interleaved with render-phase work.
//   - The actual page shows a heading and a body paragraph.

import { useEffect, type ReactElement } from "react";
import { createRoot } from "react-dom/client";

function Header(): ReactElement {
  // TODO: console.log("rendering Header") then return <header><h1>My App</h1></header>
  return <header />;
}

function Body(): ReactElement {
  // TODO: console.log("rendering Body")
  // TODO: add useEffect(() => { console.log("Body committed"); }, [])
  return <p>Welcome</p>;
}

function App(): ReactElement {
  // TODO: console.log("rendering App") then return <><Header /><Body /></>
  return <></>;
}

// --- mount (only runs in a browser with a #root element present) ---
const container = document.getElementById("root");
if (container) {
  createRoot(container).render(<App />);
} else {
  console.log(
    "No #root element found — this file is meant to run in a Vite/CRA browser app, not Node."
  );
}