"use client";
/**
 * Splash 底部按钮组
 */
import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
import { LoadingIndicator } from "@/app/_components/core/loading-indicator";
import styles from "./splash-button.module.css";

export interface SplashButtonProps {
  onSkip: () => void;
}

export function SplashButton({ onSkip }: SplashButtonProps) {
  const state = useAuthState();
  const authDispatch = useAuthDispatch();
  const isLoading = state.isLoading;

  const handleFacebookLogin = () => {
    authDispatch({
      type: "AuthFacebookLoginSubmitted",
      provider: "facebook",
    });
  };

  return (
    <div className={styles.wrapper}>
      {/* Skip 按钮 = 显式游客登录入口（派发事件 + 立即跳 /chat） */}
      <button
        type="button"
        onClick={onSkip}
        disabled={isLoading}
        className={styles.skip}
      >
        {isLoading ? (
          <LoadingIndicator color="#ffffff" />
        ) : (
          "Skip"
        )}
      </button>

      <div className={styles.separator} aria-hidden="true" />

      {/* 社交登录按钮（NextAuth Facebook OAuth） */}
      <button
        type="button"
        onClick={handleFacebookLogin}
        disabled={isLoading}
        className={styles.facebookButton}
      >
        {isLoading ? (
          <LoadingIndicator color="#ffffff" />
        ) : (
          <span className={styles.facebookLabel}>Login with Facebook</span>
        )}
      </button>
    </div>
  );
}
