"use client";
/**
 * 法律声明（Terms / Privacy + 复选框）
 *
 * 
 *
 * 视觉规格（与 Dart 对齐）：
 *   - 行：16px 白色圆形复选框 + 12px 富文本
 *   - 复选框：白底 + 1px 白色边框；选中时 10px 粉色实心圆
 *   - 默认选中（仅视觉，不阻塞提交）
 *   - 链接加粗（Privacy Policy / Terms of Service）
 *   - 文字深色
 */
import { useState } from "react";

import { AppConstants } from "@/core/app_constants";

export function AuthLegalText() {
  const [checked, setChecked] = useState(true);

  return (
    <div className="flex w-full items-start gap-sm">
      <button
        type="button"
        className="mt-0.5 inline-flex size-(--auth-legal-checkbox-size) flex-none cursor-pointer items-center justify-center rounded-full border border-auth-surface bg-auth-surface p-0 shadow-[0_0_0_1px_rgba(0,0,0,0.06)]"
        onClick={() => setChecked((c) => !c)}
        aria-label="Agree to terms"
        aria-pressed={checked}
      >
        {checked ? (
          <span className="block size-(--auth-legal-checkbox-inner-size) rounded-full bg-auth-legal-check" />
        ) : null}
      </button>
      <p className="m-0 flex-auto text-left text-(length:--responsive-caption) leading-[1.4] text-auth-text-primary">
        I agree to the Cozsweet {" "}
        <a
          href={AppConstants.privacyPolicyUrl}
          className="font-bold text-auth-text-primary no-underline hover:underline"
          target="_blank"
          rel="noreferrer"
        >
          Privacy Agreement
        </a>{" "}
        and{" "}
        <a
          href={AppConstants.termsOfServiceUrl}
          className="font-bold text-auth-text-primary no-underline hover:underline"
          target="_blank"
          rel="noreferrer"
        >
          Terms of User
        </a>
      </p>
    </div>
  );
}
