"use client";
/**
 * 通用圆形复选框
 *
 * 视觉规格（与 `auth-legal-text` 一致）：
 *   - 16px 白色圆形
 *   - 选中时 10px 粉色实心圆
 *   - 提供可选 `label`，与复选框一起点击可切换
 */
import type { ReactNode } from "react";

export interface CheckboxProps {
  checked: boolean;
  onChange: (next: boolean) => void;
  /** 可选标签；提供时点击文字也能切换 */
  label?: ReactNode;
  disabled?: boolean;
  className?: string;
  /** 当未提供 label 时使用 */
  ariaLabel?: string;
}

export function Checkbox({
  checked,
  onChange,
  label,
  disabled = false,
  className,
  ariaLabel,
}: CheckboxProps) {
  const checkboxClassName = [
    "mt-0.5 inline-flex size-(--auth-legal-checkbox-size) shrink-0 cursor-pointer items-center justify-center rounded-full border border-(--color-auth-surface) bg-(--color-auth-surface) p-0 shadow-[0_0_0_1px_rgba(0,0,0,0.06)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:cursor-not-allowed disabled:opacity-50",
  ].join(" ");
  const button = (
    <button
      type="button"
      role="checkbox"
      aria-checked={checked}
      aria-label={ariaLabel}
      disabled={disabled}
      onClick={() => onChange(!checked)}
      className={checkboxClassName}
    >
      {checked ? (
        <span className="block size-(--auth-legal-checkbox-inner-size) rounded-full bg-(--color-auth-legal-check)" />
      ) : null}
    </button>
  );

  if (label == null) {
    return (
      <span className={className} style={{ display: "inline-flex" }}>
        {button}
      </span>
    );
  }

  return (
    <label
      className={[
        "flex w-full cursor-pointer items-start gap-(--spacing-sm)",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
    >
      {button}
      <span className="flex-auto text-left text-(length:--font-size-sm) leading-[1.4] text-auth-text-primary">
        {label}
      </span>
    </label>
  );
}
