---
/**
 * PricingTable.astro
 * ---------------------------------------------------------------------------
 * Generic quantity/pricing table. Takes a caption + a list of tiers
 * ({ band, price, note? }) and renders a clean three-column table. Used for
 * both the card-set tiers and the deck-box print tiers.
 */
import Icon from '@components/Icon.astro';

interface Tier {
  band: string;
  price: string;
  note?: string;
}

interface Props {
  /** mdi icon shown beside the caption. */
  icon?: string;
  caption: string;
  tiers: Tier[];
  /** Column header for the price column, e.g. "Price". */
  priceHeader?: string;
  /** Optional supporting line under the caption. */
  subtitle?: string;
}

const { icon, caption, tiers, priceHeader = 'Price', subtitle } = Astro.props;
---

<div class="flex flex-col gap-4">
  <div class="flex flex-col gap-1">
    <span class="inline-flex items-center gap-2 font-sans text-lg font-bold" style="color: var(--color-text);">
      {icon && <Icon name={icon} class="h-5 w-5" style="color: var(--color-accent);" />}
      {caption}
    </span>
    {subtitle && (
      <span class="text-sm" style="color: var(--color-text-muted);">{subtitle}</span>
    )}
  </div>

  <div class="overflow-hidden rounded-xl border" style="border-color: var(--color-border);">
    <table class="w-full border-collapse text-left text-sm">
      <thead>
        <tr style="background: var(--color-surface-sunken);">
          <th scope="col" class="px-4 py-3 font-sans text-xs font-semibold uppercase tracking-wider" style="color: var(--color-text-subtle);">
            Quantity
          </th>
          <th scope="col" class="px-4 py-3 text-right font-sans text-xs font-semibold uppercase tracking-wider" style="color: var(--color-text-subtle);">
            {priceHeader}
          </th>
        </tr>
      </thead>
      <tbody>
        {tiers.map((tier, i) => (
          <tr style={i > 0 ? 'border-top: 1px solid var(--color-border);' : undefined}>
            <td class="px-4 py-3" style="color: var(--color-text);">
              <span class="font-medium">{tier.band}</span>
              {tier.note && (
                <span class="ml-2 text-xs" style="color: var(--color-text-subtle);">({tier.note})</span>
              )}
            </td>
            <td class="px-4 py-3 text-right font-mono font-semibold" style="color: var(--color-accent);">
              {tier.price}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
</div>