// app/Counter.js
"use client";

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

export default Counter;

// app/page.js — a Server Component, importing the Client Component above
import Counter from "./Counter";

async function HomePage() {
  const jokes = await fetch("https://official-joke-api.appspot.com/jokes/ten").then((r) =>
    r.json()
  );

  return (
    <div>
      <Counter />
      <ul>
        {jokes.map((joke) => (
          <li key={joke.id}>{joke.setup}</li>
        ))}
      </ul>
    </div>
  );
}

export default HomePage;

/*
  Notes:
  - HomePage itself stays a Server Component (no "use client") and
    keeps fetching jokes the same way as Challenge 1.
  - Counter is the only part of the page marked "use client" — only
    its code is shipped to the browser and hydrated; the joke list
    around it remains server-rendered, static HTML.
  - This mixing of one interactive piece inside an otherwise
    server-rendered page is the standard real-world Next.js pattern.
*/