"use client";
/**
 * 通用加载指示器
 *
 * 
 *
 * 行为对齐 Flutter `CircularProgressIndicator`：
 *   - `size`：圆圈直径（默认 32）
 *   - `strokeWidth`：环宽（默认 3）
 *   - `color`：环颜色（默认 `--color-accent`）
 *   - `label`：可选的可视标签（环形下方文本）
 */
import styles from "./loading-indicator.module.css";

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

export function LoadingIndicator({
  size = 32,
  strokeWidth = 3,
  color,
  label,
}: LoadingIndicatorProps) {
  const style: React.CSSProperties = {
    width: size,
    height: size,
    borderWidth: strokeWidth,
    ...(color ? { borderTopColor: color } : {}),
  };
  return (
    <div className={styles.wrapper} role="status" aria-label="Loading">
      <div className={styles.spinner} style={style} />
      {label ? <span className={styles.label}>{label}</span> : null}
    </div>
  );
}
