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

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

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

  return (
    <div
      className={cn(
        'flex flex-col items-center justify-center min-h-[200px]',
        className
      )}
    >
      <div
        className={cn(
          'animate-spin rounded-full border-2 border-gray-300 border-t-blue-600',
          sizeClasses[size]
        )}
        role='status'
        aria-label='Chargement en cours'
      >
        <span className='sr-only'>Chargement...</span>
      </div>
      {text && (
        <p className='mt-2 text-sm text-gray-600 dark:text-gray-400'>{text}</p>
      )}
    </div>
  );
}
