ContentTable content

---
interface Props {
  heading?: string;
  caption?: string;
  headers?: string[];
  rows?: string[][];
  striped?: boolean;
  responsive?: boolean;
}

const {
  heading = "Vergelijk onze pakketten",
  caption = "Alle prijzen zijn excl. BTW en mediabudget.",
  headers = ["Pakket", "Kanalen", "Campagnes/mnd", "Rapportage", "Prijs/mnd"],
  rows = [
    ["Starter", "1 kanaal", "2", "Maandelijks", "€ 1.500"],
    ["Growth", "2 kanalen", "4", "Tweewekelijks", "€ 2.500"],
    ["Scale", "3 kanalen", "Onbeperkt", "Wekelijks", "€ 4.000"],
    ["Enterprise", "Alle kanalen", "Onbeperkt", "Dagelijks", "Op maat"],
  ],
  striped = true,
  responsive = true,
} = Astro.props;
---

<div class="ctb-wrap">
  {heading && <h2 class="ctb-heading">{heading}</h2>}
  <div class={responsive ? "ctb-scroll" : ""}>
    <table class={`ctb-table${striped ? " ctb-table--striped" : ""}`}>
      {caption && <caption class="ctb-caption">{caption}</caption>}
      <thead class="ctb-thead">
        <tr>
          {headers.map(h => <th class="ctb-th" scope="col">{h}</th>)}
        </tr>
      </thead>
      <tbody class="ctb-tbody">
        {rows.map(row => (
          <tr class="ctb-tr">
            {row.map((cell, i) => (
              i === 0
                ? <th class="ctb-th ctb-th--row" scope="row">{cell}</th>
                : <td class="ctb-td">{cell}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  </div>
</div>

<style>
  .ctb-wrap { padding: 2rem 0; }
  .ctb-heading {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 1.25rem;
  }
  .ctb-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ctb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
  }
  .ctb-caption {
    font-size: 0.8rem;
    color: #999;
    text-align: left;
    padding: 0 0 0.75rem;
    caption-side: bottom;
  }
  .ctb-thead {
    background: var(--color-primary, #0a0a0a);
  }
  .ctb-thead .ctb-th {
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: left;
    padding: 1rem 1.25rem;
    white-space: nowrap;
  }
  .ctb-tr { border-bottom: 1px solid #f0f0f0; }
  .ctb-tr:last-child { border-bottom: none; }
  .ctb-table--striped .ctb-tr:nth-child(even) {
    background: #f9f9f9;
  }
  .ctb-th--row {
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    text-align: left;
    padding: 0.9rem 1.25rem;
  }
  .ctb-td {
    padding: 0.9rem 1.25rem;
    color: #444;
  }
</style>