import type { ReactNode } from "react";
import { Suspense } from "react";
import { Loader2 } from "lucide-react";

import { EntryGate } from "@/features/player/entry-gate";

function EntryFallback(): ReactNode {
  return (
    <div
      className="flex min-h-0 flex-1 flex-col items-center justify-center bg-white"
      aria-hidden
    >
      <Loader2 className="size-8 animate-spin text-red-600" />
    </div>
  );
}

export default function EntryPage() {
  return (
    <div className="flex min-h-0 flex-1 flex-col">
      <Suspense fallback={<EntryFallback />}>
        <EntryGate />
      </Suspense>
    </div>
  );
}