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.
export function VatBreakdown({ groups }: { groups: TaxBreakdownGroup[] }) {
  if (groups.length === 0) return null;
  if (groups.length === 1) {
    const [g] = groups;
    return (
      <p className="text-label text-text-muted">
        enthält {g.rate}% MwSt.: {formatPrice(g.tax)}
      </p>
    );
  }
  return (
    <div className="flex flex-col gap-0.5">
      <p className="text-label text-text-muted">enthält MwSt.:</p>
      {groups.map((g) => (
        <p key={g.rate} className="text-label text-text-muted pl-2">
          {g.rate}%: {formatPrice(g.tax)}
        </p>
      ))}
    </div>
  );
}