"use client";
/**
 * 社交/选项登录按钮（用于底部弹层）
 *
 * 
 *
 * 视觉规格（与 Dart 弹层按钮对齐）：
 *   - 40px 高
 *   - 白底 + 1px 边框 `--color-auth-border`
 *   - 半径 20
 *   - 无阴影
 *   - 图标 20×20 + 标签
 *   - 14px 文字深色
 */
import {
  type ButtonHTMLAttributes,
  type ReactNode,
} from "react";

import styles from "./auth-social-button.module.css";

export interface AuthSocialButtonProps
  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
  icon?: ReactNode;
  children: ReactNode;
}

export function AuthSocialButton({
  icon,
  children,
  disabled,
  className,
  type = "button",
  ...rest
}: AuthSocialButtonProps) {
  return (
    <button
      type={type}
      disabled={disabled}
      className={[styles.button, className].filter(Boolean).join(" ")}
      {...rest}
    >
      {icon ? <span className={styles.icon}>{icon}</span> : null}
      <span className={styles.label}>{children}</span>
    </button>
  );
}
