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

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

export function SplashButton({ onStartChat }: SplashButtonProps) {
  const state = useAuthState();
  const isLoading = !state.hasInitialized || state.isLoading;

  return (
    <div className={styles.wrapper}>
      <button
        type="button"
        onClick={onStartChat}
        disabled={isLoading}
        className={styles.facebookButton}
      >
        {isLoading ? (
          <LoadingIndicator color="#ffffff" />
        ) : (
          <span className={styles.facebookLabel}>Start Chatting</span>
        )}
      </button>
    </div>
  );
}
