CrazeAnalytix/components/BuyBoxWarningBadge.tsx

import React, { useState } from 'react';

interface BuyBoxWarningBadgeProps {
    asin: string;
    buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
}

const COUNTRY_FLAGS: Record<string, string> = {
    DE: '🇩🇪',
    FR: '🇫🇷',
    IT: '🇮🇹',
    UK: '🇬🇧',
    ES: '🇪🇸',
};

export const BuyBoxWarningBadge: React.FC<BuyBoxWarningBadgeProps> = ({ asin, buyBoxLostMap }) => {
    const [isHovered, setIsHovered] = useState(false);

    if (!buyBoxLostMap || !asin) return null;

    const data = buyBoxLostMap.get(asin.toUpperCase());
    if (!data || data.countries.length === 0) return null;

    return (
        <div
            className="relative inline-flex"
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
        >
            <div className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-amber-500/20 border border-amber-500/50 text-amber-400 text-[9px] font-bold uppercase tracking-tight cursor-help transition-all hover:bg-amber-500/30 hover:scale-105">
                <span className="text-xs">⚠️</span>
                <span>BB Lost</span>
                <span className="text-amber-300/80">{data.countries.join(', ')}</span>
            </div>

            {/* Hover Popup */}
            {isHovered && (
                <div className="absolute z-50 left-0 top-full mt-1 w-56 bg-slate-900 border border-amber-500/30 rounded-lg shadow-xl shadow-black/50 animate-fade-in overflow-hidden">
                    <div className="bg-amber-500/20 px-3 py-2 border-b border-amber-500/30">
                        <span className="text-amber-400 text-[10px] font-black uppercase tracking-widest">
                            ⚠️ Buy Box Lost
                        </span>
                    </div>
                    <div className="p-2 space-y-1.5">
                        {data.countries.map(country => (
                            <div
                                key={country}
                                className="flex items-start gap-2 px-2 py-1.5 rounded bg-slate-800/50 border border-white/5"
                            >
                                <span className="text-base">{COUNTRY_FLAGS[country] || '🏳️'}</span>
                                <div className="flex flex-col min-w-0">
                                    <span className="text-[10px] font-black text-white uppercase tracking-tight">
                                        {country}
                                    </span>
                                    <span className="text-[10px] text-amber-400/90 truncate" title={data.reasons[country] || 'Unknown'}>
                                        {data.reasons[country] || 'Unknown'}
                                    </span>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            )}
        </div>
    );
};