const App = () => {
  const [ads, setAds] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    fetch('/api/ads')
      .then(r => r.ok ? r.json() : Promise.reject(new Error('API fejl: ' + r.status)))
      .then(data => { setAds(data.ads || []); setLoading(false); })
      .catch(e => { setError(e.message); setLoading(false); });
  }, []);

  if (loading) return <p className="state">Henter annoncer…</p>;
  if (error)   return <p className="state state--error">Fejl: {error}</p>;

  return (
    <>
      <header>
        <h1>Annoncebibliotek</h1>
        <p>{ads.length} annoncer</p>
      </header>
      <main className="grid">
        {ads.map(ad => <AdCard key={ad.id} ad={ad} />)}
      </main>
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);