/* @component-map
 * App — Main container, handles layout and view switching
 * Header — Top bar with title and favorites count badge
 * MascotCard — Dad image with animated speech bubble
 * JokeCard — Displays joke setup, punchline, and action buttons
 * FavoritesPanel — Collapsible list of saved favorite jokes
 * Toast — Notification toast message
 * @end-component-map */

import { Header } from './components/Header.jsx';
import { MascotCard } from './components/MascotCard.jsx';
import { JokeCard } from './components/JokeCard.jsx';
import { FavoritesPanel } from './components/FavoritesPanel.jsx';
import { useCallback, useState } from 'react';
import { Toast } from './components/Toast.jsx';

function App() {
  const [bubbleText, setBubbleText] = useState("Here comes one! 😄");
  const [bubbleKey, setBubbleKey] = useState(0);
  const [toastMsg, setToastMsg] = useState("");
  const [toastVisible, setToastVisible] = useState(false);

  const showToast = useCallback((msg) => {
    setToastMsg(msg);
    setToastVisible(true);
    setTimeout(() => setToastVisible(false), 2200);
  }, []);

  const animateBubble = useCallback((text) => {
    setBubbleText(text);
    setBubbleKey(k => k + 1);
  }, []);

  return (
    <div className="app-wrapper">
      <Header />
      <MascotCard bubbleText={bubbleText} bubbleKey={bubbleKey} />
      <JokeCard animateBubble={animateBubble} showToast={showToast} />
      <FavoritesPanel showToast={showToast} />
      <Toast message={toastMsg} visible={toastVisible} />
    </div>
  );
}

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