import React from 'react';

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

export const BuyBoxWarningBadge: React.FC<BuyBoxWarningBadgeProps> = ({ asin, buyBoxLostMap }) => {
    if (!buyBoxLostMap || !asin) return null;

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

    const tooltipContent = data.countries
        .map(c => `${c}: ${data.reasons[c] || 'Unknown'}`)
        .join('\n');

    return (
        <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"
            title={`⚠️ Buy Box Lost\n${tooltipContent}`}
        >
            <span className="text-xs">⚠️</span>
            <span>BB Lost</span>
            <span className="text-amber-300/80">{data.countries.join(', ')}</span>
        </div>
    );
};