CrazeAnalytix/components/StockBadge.tsx

import React from 'react';

interface StockBadgeProps {
    stock: number | undefined;
}

export const StockBadge: React.FC<StockBadgeProps> = ({ stock }) => {
    if (stock === undefined) return null;

    const isLow = stock < 50;
    const isOut = stock <= 0;

    let themeClasses = "from-indigo-600 to-purple-600 border-indigo-400/50";
    let icon = "📦";

    if (isOut) {
        themeClasses = "from-rose-600 to-red-700 border-rose-400/50";
        icon = "❌";
    } else if (isLow) {
        themeClasses = "from-amber-500 to-orange-600 border-amber-400/50";
        icon = "⚠️";
    }

    return (
        <div
            className={`inline-flex items-center gap-1.5 px-2 py-1 rounded bg-gradient-to-br text-white border shadow-lg transition-all hover:scale-105 group/stock ${themeClasses}`}
            title={`Total Stock (GMBH): ${stock}`}
        >
            <span className="text-xs filter drop-shadow-sm">{icon}</span>
            <div className="flex flex-col leading-none">
                <span className="text-[8px] font-black uppercase tracking-tighter opacity-80">Stock</span>
                <span className="text-[10px] font-bold tracking-tight">{stock.toLocaleString('de-DE')}</span>
            </div>
        </div>
    );
};