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

interface EmptyStateProps {
  icon?: LucideIcon;
  iconSize?: number;
  title?: string;
  description?: string;
  action?: React.ReactNode;
  className?: string;
  iconClassName?: string;
  textClassName?: string;
}

/**
 * EmptyState - 空状态组件
 * 
 * 用于显示列表、表格等为空时的占位状态
 * 
 * @example
 * ```tsx
 * <EmptyState 
 *   icon={ImageIcon}
 *   title="暂无图片"
 *   description="点击上传按钮添加图片"
 *   action={<Button>上传图片</Button>}
 * />
 * ```
 */
export const EmptyState: React.FC<EmptyStateProps> = ({
  icon: Icon,
  iconSize = 48,
  title,
  description,
  action,
  className,
  iconClassName,
  textClassName
}) => {
  return (
    <div className={cn(
      "flex flex-col items-center justify-center py-12 text-muted-foreground",
      className
    )}>
      {Icon && (
        <Icon 
          size={iconSize} 
          strokeWidth={1} 
          className={cn("mb-3 opacity-20", iconClassName)} 
        />
      )}
      {title && (
        <p className={cn(
          "text-sm font-medium",
          textClassName
        )}>
          {title}
        </p>
      )}
      {description && (
        <p className="text-xs opacity-60 mt-1 text-center max-w-sm">
          {description}
        </p>
      )}
      {action && (
        <div className="mt-4">
          {action}
        </div>
      )}
    </div>
  );
};
