"use client";

type HomeBootOverlayProps = {
  visible: boolean;
  /** 默认：正在同步会员状态… */
  subtitle?: string;
};

/**
 * 全屏加载（登录验证、首屏等按需使用）
 */
export function HomeBootOverlay({ visible, subtitle }: HomeBootOverlayProps) {
  if (!visible) return null;

  const line = subtitle ?? "正在同步会员状态…";

  return (
    <div
      className="fixed inset-0 z-[200] flex flex-col items-center justify-center gap-6 bg-[var(--background)]/92 backdrop-blur-md"
      aria-busy="true"
      aria-live="polite"
    >
      <div className="relative flex h-20 w-20 items-center justify-center">
        <div
          className="absolute inset-0 animate-spin rounded-full border-2 border-amber-500/20 border-t-amber-500"
          style={{ animationDuration: "1.05s" }}
        />
        <div
          className="absolute inset-2 animate-spin rounded-full border-2 border-transparent border-b-amber-400/50"
          style={{ animationDuration: "0.75s", animationDirection: "reverse" }}
        />
        <span
          className="animate__animated animate__pulse animate__infinite text-3xl drop-shadow-sm"
          aria-hidden
        >
          🌍
        </span>
      </div>
      <div className="flex flex-col items-center gap-1 px-6 text-center">
        <p className="text-base font-semibold tracking-wide text-[var(--foreground)]">
          异度星球
        </p>
        <p className="text-sm text-[var(--muted-foreground)]">{line}</p>
      </div>
    </div>
  );
}