CrazeAnalytix/components/Top50Badge.tsx

import React from 'react';

interface Top50BadgeProps {
    rank: number;
    label: string;
    theme?: 'amber' | 'blue' | 'indigo';
}

export const Top50Badge: React.FC<Top50BadgeProps> = ({ rank, label, theme = 'amber' }) => {
    const themeClasses = {
        amber: 'from-amber-500 to-orange-500 border-amber-400/50',
        blue: 'from-blue-500 to-cyan-500 border-blue-400/50',
        indigo: 'from-indigo-500 to-purple-500 border-indigo-400/50',
    };

    return (
        <span
            className={`inline-flex items-center justify-center px-1.5 py-0.5 rounded text-[9px] font-black bg-gradient-to-r ${themeClasses[theme]} text-white shadow-sm border whitespace-nowrap`}
            title={`Top ${rank} Best Seller 2025 (${label})`}
        >
            <span className="mr-0.5">🏆</span>
            <span className="mr-0.5 opacity-90">{label}</span>
            {rank}
        </span>
    );
};