import { Loader2 } from 'lucide-react';

interface LoadingProps {
  message?: string;
  fullPage?: boolean;
  size?: 'small' | 'medium' | 'large';
}

export function Loading({ message = 'Loading...', fullPage = false, size = 'medium' }: LoadingProps) {
  const sizeClasses = {
    small: { icon: 'h-5 w-5', text: 'text-sm', padding: 'py-4' },
    medium: { icon: 'h-8 w-8', text: 'text-base', padding: 'py-12' },
    large: { icon: 'h-12 w-12', text: 'text-lg', padding: 'py-16' },
  };

  const { icon, text, padding } = sizeClasses[size];

  if (fullPage) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-muted">
        <div className="text-center">
          <Loader2 className={`${icon} text-primary animate-spin mx-auto mb-4`} />
          <p className={`text-muted-foreground ${text}`}>{message}</p>
        </div>
      </div>
    );
  }

  return (
    <div className={`flex items-center justify-center ${padding}`}>
      <div className="text-center">
        <Loader2 className={`${icon} text-primary animate-spin mx-auto mb-3`} />
        <p className={`text-muted-foreground ${text}`}>{message}</p>
      </div>
    </div>
  );
}
