// Exercise 2: build a component tree with props (no state yet)
//
// Implement <ProfileCard /> and <ProfileList />:
//
// ProfileCard receives { name: string; role: string } and renders:
//   <div className="card">
//     <h2>{name}</h2>
//     <p>{role}</p>
//   </div>
//
// ProfileList receives { people: { name: string; role: string }[] } and
// renders one <ProfileCard /> per person, each wrapped implicitly by React's
// key requirement — remember every element in a list needs a stable "key"
// prop so React can match items across renders (see the "Rendering and
// reconciliation" topic for exactly why).
//
// This exercise is UI-oriented — there is no DOM in this file, so the
// "self-check" below only verifies the *shape* of what your components
// return (their element trees), not pixels.

import { type ReactElement } from "react";

type Person = { name: string; role: string };

function ProfileCard({ name, role }: Person): ReactElement {
  // TODO: implement per the description above
  return <div />;
}

function ProfileList({ people }: { people: Person[] }): ReactElement {
  // TODO: implement — map over people, render <ProfileCard key={...} ... />
  return <div />;
}

// --- self-check: do not modify below this line ---
// (pure structural check — no real DOM, just inspecting the element tree)
const card = ProfileCard({ name: "Ana", role: "Engineer" });
const cardOk =
  card.type === "div" &&
  (card.props as any).className === "card";
console.log("ProfileCard shape:", cardOk ? "PASS" : "FAIL");

const list = ProfileList({
  people: [
    { name: "Ana", role: "Engineer" },
    { name: "Bo", role: "Designer" },
  ],
});
const children = (list.props as any).children;
const listOk = Array.isArray(children) ? children.length === 2 : false;
console.log("ProfileList renders 2 cards:", listOk ? "PASS" : "FAIL (did you map over people?)");

// Visual verification (if you mount this in a real app):
// - Two cards should appear, one for Ana (Engineer) and one for Bo (Designer).
// - Check the console for a React "key" warning — if you see one, you
//   forgot the key prop on each <ProfileCard />.