import * as React from 'react';
import { cn } from '@/lib/utils';
import { type LucideIcon, Inbox } from 'lucide-react';

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

const EmptyState = React.memo(function EmptyState({
    icon: Icon = Inbox,
    title = 'No data found',
    description,
    action,
    className,
}: EmptyStateProps) {
    return (
        <div className={cn('flex flex-col items-center justify-center py-12 text-center', className)}>
            <div className="rounded-full bg-muted p-3 mb-4">
                <Icon className="h-6 w-6 text-muted-foreground" />
            </div>
            <h3 className="text-sm font-medium text-foreground">{title}</h3>
            {description && (
                <p className="mt-1 text-sm text-muted-foreground max-w-sm">{description}</p>
            )}
            {action && <div className="mt-4">{action}</div>}
        </div>
    );
});

export { EmptyState };