import { TrendingUp, TrendingDown } from 'lucide-react';

interface TrendBadgeProps {
    value: number;
    label?: string;
    suffix?: string;
    subtitle?: string;
}

export function TrendBadge({ value, label, suffix, subtitle }: TrendBadgeProps) {
    const isPositive = value >= 0;
    const Icon = isPositive ? TrendingUp : TrendingDown;
    const color = isPositive ? 'text-[#68f349]' : 'text-red-400';

    return (
        <span className="inline-flex min-w-0 flex-col">
            <span className={`inline-flex items-center gap-1 text-[14px] tracking-[-0.28px] ${color}`}>
                <span>
                    {isPositive ? '+' : ''}
                    {value}
                    {suffix}
                </span>
                {label ? <span className="text-white text-[14px] tracking-[-0.28px]">{label}</span> : null}
                <Icon className="size-[18px]" />
            </span>
            {subtitle ? <span className="text-[12px] text-white/50 tracking-[-0.24px]">{subtitle}</span> : null}
        </span>
    );
}