"use client";

import { useOnline } from "@/hooks/useOnline";

export function OfflineBanner() {
  const online = useOnline();
  if (online) return null;
  return (
    <div
      role="status"
      className="fixed bottom-0 inset-x-0 z-50 px-4 py-2 text-sm text-center"
      style={{
        background: "var(--bg-elevated)",
        color: "var(--text)",
        borderTop: "1px solid var(--border-strong)",
      }}
    >
      Offline. Changes are saved locally and will sync when you reconnect.
    </div>
  );
}