'use client';

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

const sizeClasses = {
  sm: 'w-3 h-3',
  md: 'w-4 h-4',
  lg: 'w-6 h-6',
};

const textSizeClasses = {
  sm: 'text-xs',
  md: 'text-sm',
  lg: 'text-base',
};

export function LoadingSpinner({
  size = 'sm',
  className = '',
  text,
}: LoadingSpinnerProps) {
  return (
    <div
      className={`flex items-center gap-1 text-[var(--primary)] font-mono ${textSizeClasses[size]} ${className}`}
    >
      <div
        className={`${sizeClasses[size]} border border-[var(--primary)] border-t-transparent rounded-full animate-spin`}
      ></div>
      {text && <span>{text}</span>}
    </div>
  );
}
