// app/BrokenCounter.js — BEFORE the fix (no "use client")

import { useState } from "react";

function BrokenCounter() {
  const [count, setCount] = useState(0); // this line errors at build/render time
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

export default BrokenCounter;

/*
  Expected error (wording varies by Next.js version), something like:

    Error: useState only works in Client Components. Add the
    "use client" directive at the top of the file to use it.

  This happens because BrokenCounter is treated as a Server Component
  by default, and Server Components have no browser runtime to
  manage React state in at all.
*/

// app/FixedCounter.js — AFTER the fix
"use client";

import { useState } from "react";

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

export default FixedCounter;

/*
  Notes:
  - The only change between the broken and fixed versions is the
    "use client" directive added as the very first line of the file.
  - Once added, useState works exactly as it has throughout the rest
    of this course, since the component now hydrates and runs in the
    browser like every other component built so far.
*/