
import React, { ReactNode } from 'react';
import { LucideIcon } from 'lucide-react';
import { Button } from '../ui/Button';

interface EmptyStateProps {
    icon?: LucideIcon;
    title: string;
    description?: string;
    actionLabel?: ReactNode;
    onAction?: () => void;
    className?: string;
}

export const EmptyState: React.FC<EmptyStateProps> = ({
    icon: Icon,
    title,
    description,
    actionLabel,
    onAction,
    className = '',
}) => {
    return (
        <div className={`text-center py-12 ${className}`}>
            {Icon && (
                <Icon className="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />
            )}
            <h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">
                {title}
            </h3>
            {description && (
                <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    {description}
                </p>
            )}
            {actionLabel && onAction && (
                <div className="mt-6">
                    <Button onClick={onAction} className="flex items-center gap-2 mx-auto">
                        {actionLabel}
                    </Button>
                </div>
            )}
        </div>
    );
};

