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.
//
// `self-end` (not `w-full`/`flex-1` spacer) — an earlier version
// right-aligned each € amount by spanning the row edge-to-edge across the
// full summary panel, matching the Gesamtsumme total line above it. That
// made this secondary "enthält X% MwSt." hint visually disconnect from
// its own label whenever the panel was wide, dragging the amount far off
// to the right. Sized to its own content instead and pinned to the right
// edge with `self-end`, so the whole block sits directly under the
// Gesamtsumme € amount above it (same right edge) rather than starting
// flush with the panel's left side. No `pl-2` indent on the per-rate rows
// either — since the block itself is now shrink-wrapped to its content
// width, an indent there would misalign the rows against the "enthält
// MwSt:" label sitting right above them; both start at the same x now.
// The rate column is still a fixed width (`w-8`) and right-aligned with
// `tabular-nums` (equal-width digits) so a single-digit rate like "7%"
// lines up with a two-digit one like "19%".
export function VatBreakdown({ groups }: { groups: TaxBreakdownGroup[] }) {
  if (groups.length === 0) return null;
  if (groups.length === 1) {
    const [g] = groups;
    return (
      <p className="self-end text-label text-text-muted">
        enthält {g.rate}% MwSt.: {formatPrice(g.tax)}
      </p>
    );
  }
  return (
    <div className="self-end flex flex-col gap-0.5">
      <p className="text-label text-text-muted">enthält MwSt.:</p>
      {groups.map((g) => (
        <div key={g.rate} className="flex items-baseline gap-1.5">
          <span className="w-8 shrink-0 text-right text-label text-text-muted tabular-nums">{g.rate}%</span>
          <span className="text-label text-text-muted tabular-nums">{formatPrice(g.tax)}</span>
        </div>
      ))}
    </div>
  );
}