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

export default function EmptyState({ icon: Icon, title, description, action, className }: { icon?: LucideIcon; title: string; description?: string; action?: ReactNode; className?: string }) {
    return (
        <div className={cn('flex flex-col items-center rounded-2xl border border-dashed border-border px-6 py-16 text-center', className)}>
            {Icon && (
                <div className="mb-4 flex size-12 items-center justify-center rounded-xl border border-border bg-card text-muted-foreground shadow-soft">
                    <Icon className="size-5" />
                </div>
            )}
            <h3 className="text-h3">{title}</h3>
            {description && <p className="mt-1.5 max-w-sm text-sm text-muted-foreground">{description}</p>}
            {action && <div className="mt-5">{action}</div>}
        </div>
    );
}