import type { HTMLAttributes } from "react";
import { cn } from "../../lib/cn";
import { Spinner } from "../feedback";

export type LoadingIndicatorProps = HTMLAttributes<HTMLDivElement> & {
  label?: string;
};

export function LoadingIndicator({
  className,
  label = "Loading",
  ...props
}: LoadingIndicatorProps) {
  return (
    <div
      className={cn(
        "inline-flex items-center gap-2 rounded-[var(--uhuru-radius-md)] border border-[var(--uhuru-border-subtle)] bg-[var(--uhuru-surface-muted)] px-3 py-2 text-sm text-[var(--uhuru-text-secondary)]",
        className,
      )}
      {...props}
    >
      <Spinner className="h-4 w-4 border-[1.5px]" />
      <span>{label}</span>
    </div>
  );
}