client/src/components/ui/spinner.tsx

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

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

export function Spinner({ className, size = "md" }: SpinnerProps) {
  const sizeClasses = {
    sm: "w-4 h-4",
    md: "w-6 h-6", 
    lg: "w-8 h-8"
  };

  return (
    <div 
      className={cn(
        "spinner",
        sizeClasses[size],
        className
      )}
      data-testid="spinner"
    />
  );
}

export function LoadingSpinner({ text = "Loading...", className }: { text?: string; className?: string }) {
  return (
    <div className={cn("flex items-center justify-center space-x-2 py-8", className)}>
      <Spinner />
      <span className="text-muted-foreground">{text}</span>
    </div>
  );
}