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

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

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

  return (
    <div className="z-2 flex w-full flex-row items-center justify-center gap-[clamp(var(--spacing-md,12px),4.815vw,var(--spacing-26,26px))] px-[clamp(var(--spacing-sm,8px),2.963vw,var(--spacing-lg,16px))]">
      <button
        type="button"
        onClick={onStartChat}
        disabled={isLoading}
        className="inline-flex min-h-(--responsive-control-height,48px) w-full max-w-120 flex-auto cursor-pointer items-center justify-center rounded-(--radius-full,999px) border-0 bg-[linear-gradient(to_right,var(--color-button-gradient-start),var(--color-button-gradient-end))] px-[clamp(var(--spacing-lg,16px),5.556vw,30px)] font-bold italic text-white shadow-[0_0_10px_rgba(248,89,168,0.3)] disabled:cursor-not-allowed disabled:opacity-70"
      >
        {isLoading ? (
          <LoadingIndicator color="#ffffff" />
        ) : (
          <span className="whitespace-nowrap text-(length:--responsive-section-title,var(--font-size-xxl)) font-bold text-white">
            Start Chatting
          </span>
        )}
      </button>
    </div>
  );
}