import { useEffect, useState } from "react";

/**
 * OfflineBanner — aviso de "sem conexão", com a identidade visual do site.
 *
 * Em vez de trocar a página inteira por um offline.html separado (que no
 * modelo de Service Worker deste projeto — generateSW + navigateFallback
 * para index.html, necessário pro roteamento client-side funcionar —
 * acabaria aparecendo também em casos que não são realmente "offline"),
 * a interface do app já continua funcionando normalmente com os dados que
 * estiverem em cache (React Query + o cache do Workbox). Este banner só
 * avisa o usuário do estado da conexão, sem interromper a navegação.
 */
export default function OfflineBanner() {
  const [isOffline, setIsOffline] = useState(
    typeof navigator !== "undefined" ? !navigator.onLine : false
  );

  useEffect(() => {
    const goOffline = () => setIsOffline(true);
    const goOnline = () => setIsOffline(false);

    window.addEventListener("offline", goOffline);
    window.addEventListener("online", goOnline);

    return () => {
      window.removeEventListener("offline", goOffline);
      window.removeEventListener("online", goOnline);
    };
  }, []);

  if (!isOffline) return null;

  return (
    <div
      className="fixed top-0 left-0 right-0 z-50 bg-sof-gold text-sof-borgonha text-center text-xs font-bold py-1.5"
      role="status"
    >
      Sem conexão — mostrando o que já foi carregado
    </div>
  );
}
