import React, {ReactNode} from "react";
import {LucideIcon} from "lucide-react";
import IconContainer from "@/components/ui/IconContainer";

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

export default function EmptyState(
    {
        icon,
        title,
        description,
        action,
    }: EmptyStateProps) {
    return (
        <div className="h-full flex flex-col items-center justify-center py-12 text-center p-8">
            <div className="mb-6">
                <IconContainer icon={icon} size="xl" shape="rounded"/>
            </div>
            <h3 className="text-xl font-['ADLaM_Display'] text-text-primary mb-3">{title}</h3>
            {description && (
                <p className="text-muted max-w-md text-lg leading-relaxed">{description}</p>
            )}
            {action && (
                <div className="mt-6">{action}</div>
            )}
        </div>
    );
}