Props & composition.
How components talk to each other.

// The child component receives props as its first argument
function Greeting(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>You are {props.age} years old.</p>
    </div>
  );
}

// The parent passes props as JSX attributes
function App() {
  return (
    <div>
      <Greeting name="Alice" age={28} />
      <Greeting name="Bob" age={34} />
      <Greeting name="Priya" age={31} />
    </div>
  );
}

export default App;

// BEFORE — verbose
function Greeting(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>You are {props.age} years old.</p>
      <p>Your email is {props.email}.</p>
    </div>
  );
}

// AFTER — destructured in the parameter list
function Greeting({ name, age, email }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
      <p>Your email is {email}.</p>
    </div>
  );
}

// Both versions work identically.
// Destructuring is just cleaner — no props. prefix everywhere.
// Same props passed: <Greeting name="Alice" age={28} email="a@b.com" />

// A Card component that wraps whatever is between its tags
function Card({ children }) {
  return (
    <div style={{
      border: '1px solid #334155',
      borderRadius: '8px',
      padding: '1rem',
      background: '#1e293b',
    }}>
      {children}
    </div>
  );
}

// Use it — the children can be anything
function App() {
  return (
    <div>
      <Card>
        <h2>User Profile</h2>
        <p>Alice Chen</p>
        <p>alice@example.com</p>
      </Card>

      <Card>
        <img src="photo.jpg" alt="Profile" />
        <button>Edit</button>
      </Card>

      <Card>
        Just some text
      </Card>
    </div>
  );
}

// Default values via destructuring
function Greeting({
  name = 'World',
  age = 0,
  role = 'user',
}) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Age: {age}, Role: {role}</p>
    </div>
  );
}

// All of these work:
<Greeting /> // "Hello, World!" age 0, role user
<Greeting name="Alice" /> // "Hello, Alice!" age 0, role user
<Greeting name="Bob" age={30} /> // "Hello, Bob!" age 30
<Greeting name="Carol" age={25} role="admin" /> // everything overridden

// If a prop is required — no default — passing it is the parent's job.
// If the parent forgets, the child gets undefined and renders "Hello, !"
// which is a bug. TypeScript or PropType checks catch this.

// Parent passes a function as a prop
function App() {
  function handleDelete(name) {
    alert(`Deleting ${name}`);
  }

  return (
    <div>
      <UserCard name="Alice" onDelete={handleDelete} />
      <UserCard name="Bob" onDelete={handleDelete} />
    </div>
  );
}

// Child receives the function and calls it
function UserCard({ name, onDelete }) {
  return (
    <div>
      <span>{name}</span>
      <button onClick={() => onDelete(name)}>
        Delete
      </button>
    </div>
  );
}

// Data flow:
// 1. Parent owns the delete logic (handleDelete)
// 2. Parent passes it to child (onDelete={handleDelete})
// 3. Child calls it on button click (onDelete(name))
// 4. Parent's function runs, does the actual deletion
// This is "state down, events up" in action.

// Prop drilling — theme travels through 3 components
function App() {
  const theme = 'dark';
  return <Layout theme={theme} />;
}

function Layout({ theme }) {
  // Layout doesn't use theme — just passes it down
  return <Sidebar theme={theme} />;
}

function Sidebar({ theme }) {
  // Sidebar doesn't use theme — just passes it down
  return <Button theme={theme} />;
}

function Button({ theme }) {
  // Finally — Button actually uses it
  return <button className={theme}>Click</button>;
}

// The problem: adding a new prop means touching Layout AND Sidebar,
// even though neither of them uses it.

// ─────────────────────────────────────────

// Fix 1: Context — theme accessible anywhere
const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Layout />
    </ThemeContext.Provider>
  );
}

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Click</button>;
}
// Layout and Sidebar don't need to know about theme at all.

// Fix 2: Composition — pass children instead of drilling
function App() {
  const theme = 'dark';
  return (
    <Layout>
      <Sidebar>
        <Button theme={theme} />
      </Sidebar>
    </Layout>
  );
}