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

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={[
        "inline-flex min-h-(--auth-social-button-height) w-full cursor-pointer items-center justify-center gap-md rounded-full border border-auth-border bg-auth-surface px-lg text-(length:--responsive-body) font-medium text-auth-text-primary transition-[background,opacity] duration-150 enabled:hover:bg-[rgba(0,0,0,0.02)] disabled:cursor-not-allowed disabled:opacity-50",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
      {...rest}
    >
      {icon ? (
        <span className="inline-flex size-5 flex-none items-center justify-center">
          {icon}
        </span>
      ) : null}
      <span className="flex-none text-center">{children}</span>
    </button>
  );
}
