// src/App.jsx
import { useEffect, useState } from "react";

function JokeBox() {
  const [joke, setJoke] = useState(null);
  const [status, setStatus] = useState("idle");

  useEffect(() => {
    setStatus("loading");

    async function loadJoke() {
      try {
        const response = await fetch("https://official-joke-api.appspot.com/random_joke");
        if (!response.ok) {
          throw new Error(`Request failed: ${response.status}`);
        }
        const data = await response.json();
        setJoke(data);
        setStatus("success");
      } catch (err) {
        setStatus("error");
      }
    }

    loadJoke();
  }, []);

  if (status === "loading") return <p>Loading...</p>;
  if (status === "error") return <p>Something went wrong.</p>;
  if (status === "success") return <p>{joke.setup} — {joke.punchline}</p>;
  return null;
}

function App() {
  return <JokeBox />;
}

export default App;

/*
  Notes:
  - loadJoke is a separate async function defined inside the effect
    and called immediately — the effect's own callback is never
    itself marked async.
  - response.ok is checked explicitly and a real Error is thrown if
    it's false, ensuring HTTP error statuses land in the catch block
    just like genuine network failures do.
*/