"use client";

import { WifiOff } from "lucide-react";
import { useOnlineStatus } from "@/lib/hooks/useOnlineStatus";

/**
 * Sticky banner shown when the browser loses network connectivity.
 * Mounted once at the root layout.
 */
export default function OfflineBanner() {
  const online = useOnlineStatus();
  if (online) return null;

  return (
    <div
      role="status"
      aria-live="polite"
      /* Not sticky: the Header is also `sticky top-0`, so both claimed the same
         slot and the banner covered the header instead of stacking above it.
         It scrolls away with the announcement bar, which is the intent. */
      className="relative z-[55] flex items-center justify-center gap-2 bg-amber-500 px-4 py-2 text-center text-sm font-medium text-white shadow-sm"
    >
      <WifiOff className="h-4 w-4" />
      You&apos;re offline. Some features may be unavailable until connection is restored.
    </div>
  );
}