import React from "react";

type LoadingTitleProps = {
  title?: React.ReactNode;
  children?: React.ReactNode;
  loading?: boolean;
  level?: 2 | 3;
  className?: string;
  label?: string;
};

const h = React.createElement;

export function LoadingIndicator({ active = true, label = "正在加载" }: { active?: boolean; label?: string }) {
  if (!active) return null;
  return h("span", {
    className: "loading-spinner-indicator",
    role: "status",
    "aria-label": label,
    title: label,
    "data-testid": "loading-title-indicator",
  },
    h("span", { className: "loading-spinner-ring", "aria-hidden": true }),
  );
}

export function LoadingTitle({ title, children, loading, level = 2, className = "", label = "正在加载" }: LoadingTitleProps) {
  const tag = level === 3 ? "h3" : "h2";
  return h(tag, { className: `loading-title ${loading ? "is-loading" : ""} ${className}`.trim() },
    h("span", { className: "loading-title-text" }, children ?? title),
    h(LoadingIndicator, { active: Boolean(loading), label }),
  );
}
