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

import styles from "./checkbox.module.css";

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 button = (
    <button
      type="button"
      role="checkbox"
      aria-checked={checked}
      aria-label={ariaLabel}
      disabled={disabled}
      onClick={() => onChange(!checked)}
      className={[styles.checkbox, disabled ? styles.disabled : ""]
        .filter(Boolean)
        .join(" ")}
    >
      {checked ? <span className={styles.checkboxInner} /> : null}
    </button>
  );

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

  return (
    <label
      className={[styles.row, className].filter(Boolean).join(" ")}
    >
      {button}
      <span className={styles.text}>{label}</span>
    </label>
  );
}