import { Loader2 } from "lucide-react";

export default function Loading() {
  return (
    <div className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-background text-primary">
      <div className="relative">
        <div className="absolute inset-0 bg-primary/20 blur-xl rounded-full" />
        <Loader2 className="w-12 h-12 animate-spin relative z-10 drop-shadow-[0_0_15px_rgba(0,240,255,0.8)]" />
      </div>
      <div className="mt-8 flex flex-col items-center gap-2 font-mono">
        <p className="text-sm font-bold uppercase tracking-[0.3em] animate-pulse">
          Establishing connection
        </p>
        <div className="flex gap-2">
          <div
            className="w-1 h-1 bg-primary rounded-full animate-bounce"
            style={{ animationDelay: "0ms" }}
          />
          <div
            className="w-1 h-1 bg-primary rounded-full animate-bounce"
            style={{ animationDelay: "150ms" }}
          />
          <div
            className="w-1 h-1 bg-primary rounded-full animate-bounce"
            style={{ animationDelay: "300ms" }}
          />
        </div>
      </div>
    </div>
  );
}