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

interface EmptyStateProps {
    title: string;
    description?: string;
    action?: ReactNode;
    icon?: LucideIcon;
    className?: string;
}

/*
 * Shared empty-state card (IA §8): filtered-empty (with Reset filters action)
 * and data-absent (honest inline note, no button).
 */
export function EmptyState({
    title,
    description,
    action,
    icon: Icon = Inbox,
    className,
}: EmptyStateProps) {
    return (
        <div
            className={cn(
                'flex flex-col items-center justify-center gap-2 px-6 py-12 text-center',
                className,
            )}
        >
            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 text-gray-400">
                <Icon size={18} />
            </div>
            <p className="text-xs font-bold text-astara-purple">{title}</p>
            {description && (
                <p className="max-w-md text-[11px] leading-relaxed text-gray-400">
                    {description}
                </p>
            )}
            {action && <div className="mt-2">{action}</div>}
        </div>
    );
}