// Ported from the "Books balanced" chip in the original design prototype.
// When balanced is false, CLAUDE.md §9 wants plain English, not
// "out of balance by 234.00" — and never a scary dialog, just a clear
// statement plus who to talk to (this app has no accountant-notify flow yet,
// so the copy just names the fact, per the Task 8 brief).

import { absMoney, fmtMoney } from "../lib/money";

export function HealthChip({ balanced, outOfBalance }: { balanced: boolean; outOfBalance: string }) {
  if (balanced) {
    return (
      <span className="chip">
        <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
          <circle cx="7" cy="7" r="6.2" fill="none" stroke="var(--good)" strokeWidth="1.4" />
          <path
            d="M4.2 7.3l1.9 1.9 3.7-4"
            fill="none"
            stroke="var(--good)"
            strokeWidth="1.6"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
        Books balanced
      </span>
    );
  }

  return (
    <span className="chip chip-bad">
      <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
        <circle cx="7" cy="7" r="6.2" fill="none" stroke="var(--bad)" strokeWidth="1.4" />
        <path d="M7 4v3.4M7 9.6v.1" stroke="var(--bad)" strokeWidth="1.6" strokeLinecap="round" />
      </svg>
      Out of balance by {fmtMoney(absMoney(outOfBalance))} — call your accountant
    </span>
  );
}
