"use client";
/**
 * 通用加载指示器
 *
 * 
 *
 * 行为对齐 Flutter `CircularProgressIndicator`：
 *   - `size`：圆圈直径（默认 32）
 *   - `strokeWidth`：环宽（默认 3）
 *   - `color`：环颜色（默认 `--color-text-secondary`）
 *   - `label`：可选的可视标签（环形下方文本）
 */
import type { CSSProperties } from "react";

export interface LoadingIndicatorProps {
  size?: number;
  strokeWidth?: number;
  color?: string;
  label?: string;
}

export function LoadingIndicator({
  size = 32,
  strokeWidth = 3,
  color,
  label,
}: LoadingIndicatorProps) {
  const spinnerColor = color ?? "var(--color-text-secondary)";
  const style: CSSProperties = {
    width: size,
    height: size,
    borderWidth: strokeWidth,
    borderColor: `${spinnerColor} transparent transparent transparent`,
  };
  return (
    <div
      className="inline-flex flex-col items-center gap-sm"
      role="status"
      aria-label="Loading"
    >
      <div
        className="inline-block animate-spin rounded-full border-solid"
        style={style}
      />
      {label ? (
        <span className="text-(length:--font-size-sm) text-text-secondary">
          {label}
        </span>
      ) : null}
    </div>
  );
}
