import React from 'react';
import { Loader2 } from 'lucide-react';

interface LoadingSpinnerProps {
  size?: 'sm' | 'md' | 'lg' | 'xl';
  className?: string;
  text?: string;
  color?: 'blue' | 'white' | 'gray';
}

/**
 * Egységes loading spinner komponens
 * Lucide Loader2 ikont használ animációval
 */
export default function LoadingSpinner({ 
  size = 'md', 
  className = '',
  text,
  color = 'blue'
}: LoadingSpinnerProps) {
  const sizeClasses = {
    sm: 'w-4 h-4',
    md: 'w-6 h-6',
    lg: 'w-8 h-8',
    xl: 'w-12 h-12'
  };

  const colorClasses = {
    blue: 'text-blue-600',
    white: 'text-white',
    gray: 'text-gray-600'
  };

  return (
    <div className={`flex flex-col items-center justify-center gap-2 ${className}`}>
      <Loader2 className={`${sizeClasses[size]} animate-spin ${colorClasses[color]}`} />
      {text && <span className="text-sm text-gray-600">{text}</span>}
    </div>
  );
}