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

interface LoadingStateProps {
  message?: string;
  size?: 'sm' | 'md' | 'lg';
  overlay?: boolean;
  className?: string;
}

/**
 * LoadingState - 加载状态组件
 * 
 * 用于显示加载中的状态，支持内联和遮罩层两种模式
 * 
 * @example
 * ```tsx
 * // 内联模式
 * <LoadingState message="加载中..." />
 * 
 * // 遮罩层模式
 * <LoadingState message="正在保存..." overlay />
 * ```
 */
export const LoadingState: React.FC<LoadingStateProps> = ({
  message = '加载中...',
  size = 'md',
  overlay = false,
  className
}) => {
  const sizeMap = {
    sm: 16,
    md: 24,
    lg: 48
  };

  return (
    <div className={cn(
      "flex flex-col items-center justify-center gap-3",
      overlay ? "absolute inset-0 bg-background/80 backdrop-blur-sm z-50" : "py-12",
      className
    )}>
      <Loader2 
        className="animate-spin text-primary" 
        size={sizeMap[size]} 
      />
      {message && (
        <p className="text-sm text-muted-foreground">{message}</p>
      )}
    </div>
  );
};
