helix-engage/src/components/campaigns/budget-bar.tsx

import { cx } from '@/utils/cx';
import { formatCurrency } from '@/lib/format';

type CurrencyAmount = {
    amountMicros: number;
    currencyCode: string;
};

interface BudgetBarProps {
    spent: CurrencyAmount | null;
    budget: CurrencyAmount | null;
}

export const BudgetBar = ({ spent, budget }: BudgetBarProps) => {
    const spentMicros = spent?.amountMicros ?? 0;
    const budgetMicros = budget?.amountMicros ?? 0;

    const ratio = budgetMicros > 0 ? spentMicros / budgetMicros : 0;
    const percentage = Math.min(ratio * 100, 100);

    const fillColor =
        ratio > 0.9
            ? 'bg-error-solid'
            : ratio > 0.7
              ? 'bg-warning-solid'
              : 'bg-brand-solid';

    const spentDisplay = spent ? formatCurrency(spent.amountMicros, spent.currencyCode) : '--';
    const budgetDisplay = budget ? formatCurrency(budget.amountMicros, budget.currencyCode) : '--';

    return (
        <div>
            <div className="mb-1.5 flex items-center justify-between">
                <span className="text-xs font-medium text-tertiary">Budget</span>
                <span className="text-xs text-tertiary">
                    {spentDisplay} / {budgetDisplay}
                </span>
            </div>
            <div className="h-1.5 rounded-full bg-tertiary overflow-hidden">
                <div
                    className={cx('h-full rounded-full transition-all duration-300', fillColor)}
                    style={{ width: `${percentage}%` }}
                />
            </div>
        </div>
    );
};