import React from 'react';
import { Inbox } from 'lucide-react';

// Estado vazio padrão (profissional): ícone + título + descrição + ação opcional.
// Use quando uma lista não tem dados (em vez de deixar a área em branco).
export const EmptyState: React.FC<{
  icon?: React.ElementType;
  title?: string;
  description?: string;
  action?: React.ReactNode;
  className?: string;
}> = ({ icon: Icon = Inbox, title = 'Nada por aqui ainda', description, action, className }) => (
  <div className={`flex flex-col items-center justify-center text-center py-14 px-6 ${className || ''}`}>
    <div className="w-16 h-16 rounded-2xl bg-gray-50 border border-gray-100 flex items-center justify-center mb-4">
      <Icon size={28} className="text-gray-300" />
    </div>
    <h3 className="text-sm font-black text-gray-700 uppercase tracking-tight">{title}</h3>
    {description && <p className="text-xs text-gray-400 mt-1.5 max-w-sm leading-relaxed">{description}</p>}
    {action && <div className="mt-4">{action}</div>}
  </div>
);