"use client";
/**
 * 认证主按钮（粉渐变，46px）
 *
 * 
 *
 * 视觉规格（与 Dart 对齐）：
 *   - 46px 高
 *   - 粉渐变（#f96ADE → #f657A0）
 *   - 半径 24
 *   - 20% 红阴影（#d00c41 @ 20%）
 *   - 文字 16px bold 白色
 */
import { type ButtonHTMLAttributes, type ReactNode } from "react";

export interface AuthPrimaryButtonProps
  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
  isLoading?: boolean;
  children: ReactNode;
}

export function AuthPrimaryButton({
  isLoading,
  children,
  disabled,
  className,
  type = "button",
  ...rest
}: AuthPrimaryButtonProps) {
  return (
    <button
      type={type}
      disabled={disabled || isLoading}
      className={[
        "inline-flex min-h-(--auth-field-height) w-full cursor-pointer items-center justify-center gap-sm rounded-full border-0 bg-[linear-gradient(90deg,var(--color-auth-primary-gradient-start),var(--color-auth-primary-gradient-end))] px-lg text-(length:--responsive-body) font-bold text-white shadow-[0_3px_5px_var(--color-auth-primary-button-shadow)] transition-[filter,transform,opacity] duration-150 active:enabled:scale-98 disabled:cursor-not-allowed disabled:opacity-70",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
      {...rest}
    >
      {isLoading ? (
        <span
          className="inline-block size-(--responsive-spinner-size,18px) animate-spin rounded-full border-2 border-solid border-white border-r-transparent border-b-transparent border-l-transparent"
          aria-hidden="true"
        />
      ) : null}
      <span className="flex-auto text-center">{children}</span>
    </button>
  );
}
