import sinerggiaLogo from "@/assets/sinerggia-logo.svg";
import { Button } from "@/components/ui/button";
import { openEditorAccess } from "./EditorAccess";
import type { useAdmin } from "./useAdmin";

export function AdminGate({ state }: { state: ReturnType<typeof useAdmin> }) {
  return (
    <div className="flex min-h-screen items-center justify-center bg-paper p-6 text-center">
      <div className="max-w-sm">
        <img src={sinerggiaLogo} alt="Sinerggia" className="mx-auto h-10" />
        <p className="mt-6 text-muted-foreground">
          {state === "loading" ? "Verificando acceso…" : state === "denied" ? "Esta cuenta no tiene permisos de editor." : "Inicia sesión para entrar al modo editor."}
        </p>
        {state !== "loading" && <Button className="mt-5" onClick={openEditorAccess}>Iniciar sesión</Button>}
      </div>
    </div>
  );
}