"use client";

import { Info } from "lucide-react";
import { useSystemStatus } from "@/hooks/use-auth";
import { isLocalConvenience } from "@/lib/auth";

export function LocalModeBanner() {
  const { data } = useSystemStatus();

  if (!data || !isLocalConvenience(data)) return null;

  return (
    <div className="flex items-center justify-center gap-2 bg-amber-100 px-4 py-2 text-sm text-amber-900">
      <Info className="h-4 w-4 shrink-0" aria-hidden />
      <span>
        Local development mode — you&apos;re using a fixed local account, no login required. This
        only applies to requests from this machine; anyone reaching this app over a LAN or WAN
        connection needs a real account.
      </span>
    </div>
  );
}