import { motion } from 'framer-motion';
import { Radar } from 'lucide-react';
import type { ReactNode } from 'react';

interface CardEmptyStateProps {
    title: string;
    subtitle?: string;
    icon?: ReactNode;
    className?: string;
    minHeight?: number;
}

export function CardEmptyState({
    title,
    subtitle,
    icon,
    className = '',
    minHeight = 160,
}: CardEmptyStateProps) {
    return (
        <div
            className={`relative flex w-full items-center justify-center overflow-hidden rounded-xl border border-white/[0.06] bg-gradient-to-br from-cyan-500/[0.04] via-transparent to-fuchsia-500/[0.04] ${className}`}
            style={{ minHeight }}
        >
            <div
                className="absolute inset-0 [background:radial-gradient(circle_at_50%_50%,rgba(104,243,73,0.08),transparent_60%)]"
                aria-hidden
            />
            <div className="relative flex flex-col items-center text-center px-6 py-4">
                <div className="relative mb-3 size-12">
                    <motion.span
                        className="absolute inset-0 rounded-full bg-[#68f349]/15"
                        animate={{ scale: [1, 1.6, 1], opacity: [0.6, 0, 0.6] }}
                        transition={{ duration: 2.4, repeat: Infinity, ease: 'easeOut' }}
                        aria-hidden
                    />
                    <motion.span
                        className="absolute inset-1 rounded-full bg-[#68f349]/25"
                        animate={{ scale: [1, 1.3, 1], opacity: [0.8, 0.3, 0.8] }}
                        transition={{ duration: 2.4, repeat: Infinity, ease: 'easeOut', delay: 0.4 }}
                        aria-hidden
                    />
                    <div className="relative size-full rounded-full border border-[#68f349]/40 bg-gradient-to-br from-[#68f349]/30 to-[#68f349]/5 flex items-center justify-center">
                        {icon ?? <Radar className="size-5 text-[#9af387]" aria-hidden />}
                    </div>
                </div>
                <p className="text-[13px] font-medium text-white tracking-[-0.26px]">{title}</p>
                {subtitle ? (
                    <p className="mt-1 text-[11px] text-white/55 tracking-[-0.22px] max-w-[280px] leading-relaxed">
                        {subtitle}
                    </p>
                ) : null}
            </div>
        </div>
    );
}