// Adapted from Untitled UI React (MIT). See THIRD_PARTY_NOTICES.md.
import type { ComponentProps } from "react";

export interface LoadingIndicatorProps extends ComponentProps<"div"> {
  label?: string;
  indicatorSize?: "sm" | "md" | "lg";
  variant?: "ring" | "dots";
}

export function LoadingIndicator({
  label = "Loading",
  indicatorSize = "md",
  variant = "ring",
  className = "",
  ...props
}: LoadingIndicatorProps) {
  return (
    <div
      {...props}
      role={props.role ?? "status"}
      aria-label={props["aria-label"] ?? label}
      className={`ynr-loading-indicator ${className}`}
      data-size={indicatorSize}
      data-variant={variant}
    >
      {variant === "dots" ? (
        <span className="ynr-loading-dots" aria-hidden="true">
          <i />
          <i />
          <i />
        </span>
      ) : (
        <svg
          className="ynr-loading-ring"
          viewBox="0 0 32 32"
          fill="none"
          aria-hidden="true"
        >
          <circle className="ynr-loading-track" cx="16" cy="16" r="13" />
          <circle className="ynr-loading-progress" cx="16" cy="16" r="13" />
        </svg>
      )}
      {label && <span className="ynr-loading-label">{label}</span>}
    </div>
  );
}