import React from 'react';
import { FileX, Package } from 'lucide-react';
import { cn } from '@/lib/utils';

interface EmptyProps {
  icon?: React.ReactNode;
  title?: string;
  description?: string;
  action?: React.ReactNode;
  className?: string;
}

// Empty component with better UX
export default function Empty({ 
  icon, 
  title = '暂无数据', 
  description = '当前没有可显示的内容', 
  action,
  className 
}: EmptyProps) {
  const defaultIcon = icon || <Package className="w-12 h-12 text-gray-300" />;
  
  return (
    <div className={cn(
      'flex flex-col items-center justify-center py-12 px-4 text-center',
      'min-h-[200px]',
      className
    )}>
      <div className="mb-4">
        {defaultIcon}
      </div>
      <h3 className="text-lg font-medium text-gray-900 mb-2">
        {title}
      </h3>
      <p className="text-sm text-gray-500 mb-6 max-w-sm">
        {description}
      </p>
      {action && (
        <div className="mt-4">
          {action}
        </div>
      )}
    </div>
  );
}
