import React from 'react';
import { Loader2 } from 'lucide-react';
import { cn } from '@/lib/utils';

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

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

export default function LoadingSpinner({ 
  size = 'md', 
  text, 
  className,
  fullScreen = false 
}: LoadingSpinnerProps) {
  const content = (
    <div className={cn(
      'flex flex-col items-center justify-center gap-3',
      fullScreen ? 'fixed inset-0 bg-white/80 backdrop-blur-sm z-50' : 'py-8',
      className
    )}>
      <Loader2 className={cn(
        'animate-spin text-blue-600',
        sizeClasses[size]
      )} />
      {text && (
        <p className="text-sm text-gray-600 font-medium">
          {text}
        </p>
      )}
    </div>
  );

  return content;
}

// 简化的内联加载器
export function InlineLoader({ className }: { className?: string }) {
  return (
    <Loader2 className={cn(
      'w-4 h-4 animate-spin text-gray-400',
      className
    )} />
  );
}

// 按钮加载状态
export function ButtonLoader({ className }: { className?: string }) {
  return (
    <Loader2 className={cn(
      'w-4 h-4 animate-spin',
      className
    )} />
  );
}