client/src/components/ui/loading-spinner.tsx

import { cn } from "@/lib/utils";

interface LoadingSpinnerProps {
  size?: "sm" | "md" | "lg";
  text?: string;
  className?: string;
}

export default function LoadingSpinner({ size = "md", text, className }: LoadingSpinnerProps) {
  const sizeClasses = {
    sm: "h-4 w-4",
    md: "h-8 w-8", 
    lg: "h-12 w-12"
  };

  const textSizes = {
    sm: "text-xs",
    md: "text-sm",
    lg: "text-base"
  };

  return (
    <div className={cn("flex flex-col items-center justify-center", className)} role="status" aria-live="polite">
      <div 
        className={cn(
          "animate-spin rounded-full border-2 border-gray-200 border-t-primary", 
          sizeClasses[size]
        )}
        aria-hidden="true"
      />
      {text && (
        <p className={cn("mt-2 text-gray-600", textSizes[size])} id="loading-text">
          {text}
        </p>
      )}
      <span className="sr-only">Loading...</span>
    </div>
  );
}