"use client";

import { AnimatePresence, motion } from "framer-motion";

import { useI18n } from "@/lib/i18n";
import { fade } from "@/lib/motion";
import { useOnline } from "@/lib/use-online";

/** A quiet offline pill under the header; saved decks keep working offline. */
export function OfflineBanner() {
  const online = useOnline();
  const { t } = useI18n();

  return (
    <AnimatePresence>
      {!online ? (
        <motion.div
          initial={{ opacity: 0, y: -8 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -8 }}
          transition={fade}
          role="status"
          className="pointer-events-none fixed inset-x-0 top-0 z-[60] flex justify-center px-4 pt-safe sm:hidden"
        >
          <p className="rounded-full border border-amber-300/70 bg-amber-50/95 px-3.5 py-1.5 text-[12px] font-semibold text-amber-900 shadow-lift backdrop-blur-xl dark:border-amber-400/30 dark:bg-amber-500/20 dark:text-amber-100">
            {t("offline.banner")}
          </p>
        </motion.div>
      ) : null}
    </AnimatePresence>
  );
}