CC-Manager/web/src/components/BalanceCards.tsx

import type { Balances } from '../lib/types';

function Card({ label, value, hint }: { label: string; value: number; hint?: string }) {
  return (
    <div className={`balance-card${value < 0 ? ' is-negative' : ''}`}>
      <span className="balance-label">{label}</span>
      <span className="balance-value">{value}</span>
      {hint && <span className="balance-hint">{hint}</span>}
    </div>
  );
}

export default function BalanceCards({ balances }: { balances: Balances }) {
  const canCreate = balances.CC >= 1;
  const canRedesign = balances.redesignTotal >= 1;

  return (
    <section className="balances" aria-label="Guthaben">
      <div className="balance-grid">
        <Card label="CC-Guthaben" value={balances.CC} />
        <Card label="Redesign (bezahlt)" value={balances.REDESIGN_PAID} />
        <Card label="Redesign (Kulanz)" value={balances.REDESIGN_KULANZ} />
      </div>

      <div className="eligibility">
        <span className={canCreate ? 'ok' : 'no'}>
          {canCreate ? '✓' : '✕'} Neuer CC {canCreate ? 'moeglich' : 'nicht moeglich'}
        </span>
        <span className={canRedesign ? 'ok' : 'no'}>
          {canRedesign ? '✓' : '✕'} Redesign {canRedesign ? 'moeglich' : 'nicht moeglich'}
          {canRedesign && ` (${balances.redesignTotal} verfuegbar)`}
        </span>
      </div>

      {(balances.CC < 0 || balances.REDESIGN_PAID < 0 || balances.REDESIGN_KULANZ < 0) && (
        <p className="overdrawn-hint">
          Mindestens ein Topf ist im Minus. Das ist erlaubt, deutet aber meist auf ein noch nicht
          erfasstes Paket hin.
        </p>
      )}
    </section>
  );
}