"use client";
/**
 * 社交登录按钮组合
 *
 * 
 *
 * 包含 Facebook / Google / Apple 三个按钮的竖排列表。
 */
import { type ReactNode } from "react";

import { AuthProviderIcon } from "./auth-provider-icon";
import styles from "./auth-social-buttons.module.css";

export interface AuthSocialButtonsProps {
  onFacebook: () => void;
  onGoogle: () => void;
  onApple?: () => void;
  loadingProvider?: "facebook" | "google" | "apple" | null;
  showApple?: boolean;
  /** 自定义子节点（如嵌入 GIS 按钮） */
  googleSlot?: ReactNode;
}

export function AuthSocialButtons({
  onFacebook,
  onGoogle,
  onApple,
  loadingProvider,
  showApple = false,
  googleSlot,
}: AuthSocialButtonsProps) {
  return (
    <div className={styles.list}>
      <button
        type="button"
        className={[styles.button, styles.facebook].join(" ")}
        onClick={onFacebook}
        disabled={loadingProvider !== null && loadingProvider !== "facebook"}
      >
        <span className={styles.icon} aria-hidden="true">
          <AuthProviderIcon provider="facebook" />
        </span>
        <span>Continue with Facebook</span>
      </button>

      {googleSlot ? (
        <div className={styles.googleSlot}>{googleSlot}</div>
      ) : (
        <button
          type="button"
          className={[styles.button, styles.google].join(" ")}
          onClick={onGoogle}
          disabled={loadingProvider !== null && loadingProvider !== "google"}
        >
          <span className={styles.icon} aria-hidden="true">
            <AuthProviderIcon provider="google" />
          </span>
          <span>Continue with Google</span>
        </button>
      )}

      {showApple && onApple ? (
        <button
          type="button"
          className={[styles.button, styles.apple].join(" ")}
          onClick={onApple}
          disabled={loadingProvider !== null && loadingProvider !== "apple"}
        >
          <span className={styles.icon} aria-hidden="true">
            <AuthProviderIcon provider="apple" />
          </span>
          <span>Continue with Apple</span>
        </button>
      ) : null}
    </div>
  );
}
