import { useEffect, useState } from "react";
import "./App.css";
import audio from "./assets/click-sound.mp3";

function App() {
  const [catFact, setCatFact] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);
  const [clickSound, setClickSound] = useState(null);

  useEffect(() => {
    // Load the click sound
    const sound = new Audio(audio);
    setClickSound(sound);
  }, []);

  const playClickSound = () => {
    if (clickSound) {
      clickSound.play();
    }
  };

  const fetchData = async () => {
    try {
      setLoading(true);
      const response = await fetch("https://catfact.ninja/fact");
      if (!response.ok) {
        throw new Error("Unable to Fetch Data");
      }
      const data = await response.json();
      setCatFact(data.fact);
      setError(false);
      playClickSound(); // Play sound when fetching data
    } catch (err) {
      setError(true);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="App">
      <h1>Cat Facts</h1>
      <h1 className="Logo">🐈😼😿</h1>
      {loading && <h4 className="loading">Loading Data...⏳</h4>}
      {!loading && catFact && <h4>{catFact}</h4>}
      {error && !loading && <h1 className="error">Error 404 ! 🚫</h1>}
      {!loading && !catFact && !error && <h1>No facts available 😿</h1>}

      <button onClick={fetchData}>Show More Facts</button>
    </div>
  );
}

export default App;