veza/apps/web/src/components/ui/KodoEmptyState.tsx

import React from 'react';
import { Card, Button } from '@veza/design-system';
import { LucideIcon } from 'lucide-react';
import { cn } from '@/lib/utils';

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

export function KodoEmptyState({
    icon: Icon,
    title,
    description,
    actionLabel,
    onAction,
    className,
}: KodoEmptyStateProps) {
    return (
        <Card
            variant="glass"
            className={cn(
                'flex flex-col items-center justify-center text-center p-8 sm:p-12 animate-slideUp',
                className
            )}
        >
            <div className="relative mb-6">
                <div className="absolute inset-0 bg-kodo-cyan/20 blur-2xl rounded-full animate-pulse" />
                <div className="relative bg-kodo-ink p-4 rounded-2xl border border-kodo-cyan/30 shadow-neon-cyan animate-float">
                    <Icon className="h-10 w-10 text-kodo-cyan" />
                </div>
            </div>

            <h3 className="text-xl font-display font-bold text-white mb-2 tracking-tight">
                {title}
            </h3>

            <p className="text-kodo-secondary max-w-xs mb-8 text-sm sm:text-base leading-relaxed">
                {description}
            </p>

            {actionLabel && onAction && (
                <Button
                    variant="gaming"
                    onClick={onAction}
                    className="group"
                >
                    <span className="flex items-center gap-2">
                        {actionLabel}
                    </span>
                </Button>
            )}
        </Card>
    );
}