import { formatPrice } from "../lib/format";
import type { TaxBreakdownGroup } from "../lib/taxBreakdown";

// The actual amount of VAT included in a total — not just a disclosure
// that VAT is included (see cartTotals.ts's effectiveTaxRate() for the
// "which %" shown next to each line item elsewhere). One line per rate
// when a cart/order spans more than one; a single line otherwise. Each
// line is a flex row with a spacer (same "label, flex-1 spacer, value"
// shape as every other Zwischensumme/Versand/Gesamtsumme row in the
// sidebars this renders inside) so every € amount lands on the same
// right-hand edge — a plain "X%: Y €" text line left the amount starting
// wherever the rate's own digit count happened to end, visibly misaligned
// as soon as two different rates (e.g. "7%" vs "19%") were both present.
export function VatBreakdown({ groups }: { groups: TaxBreakdownGroup[] }) {
  if (groups.length === 0) return null;
  if (groups.length === 1) {
    const [g] = groups;
    return (
      <div className="flex items-center w-full">
        <span className="text-label text-text-muted">enthält {g.rate}% MwSt.</span>
        <span className="flex-1" />
        <span className="text-label text-text-muted">{formatPrice(g.tax)}</span>
      </div>
    );
  }
  return (
    <div className="flex flex-col gap-0.5 w-full">
      <p className="text-label text-text-muted">enthält MwSt.:</p>
      {groups.map((g) => (
        <div key={g.rate} className="flex items-center w-full pl-2">
          <span className="text-label text-text-muted">{g.rate}%</span>
          <span className="flex-1" />
          <span className="text-label text-text-muted">{formatPrice(g.tax)}</span>
        </div>
      ))}
    </div>
  );
}