import { calcDelta, formatComparePrevious } from '@/lib/abandoned-cart-stats-compare';

interface StatsCompareBadgeProps {
    current: number;
    previous?: number | null;
    compareEnabled: boolean;
    skipCompare?: boolean;
    className?: string;
    suffix?: string;
}

const StatsCompareBadge = ({
    current,
    previous,
    compareEnabled,
    skipCompare = false,
    className = '',
    suffix = '',
}: StatsCompareBadgeProps) => {
    if (!compareEnabled || skipCompare || previous == null) {
        return null;
    }

    const delta = calcDelta(current, previous);
    const colorClass =
        delta.direction === 'up'
            ? 'text-success'
            : delta.direction === 'down'
                ? 'text-danger'
                : 'text-gray-500';

    return (
        <div className={`mt-1 flex flex-wrap items-center gap-2 text-xs ${className}`}>
            <span className="text-sm text-gray-500 dark:text-slate-400">vs {formatComparePrevious(previous, suffix)}</span>
            <span className={`font-semibold ${colorClass}`}>{delta.label}</span>
        </div>
    );
};

export default StatsCompareBadge;