component PricingComparisonTable {
  props {
    caption = "Plan comparison"
    plans = []
    features = []
    featuredPlan = ""
    class = ""
  }

  view {
    <div class="wire-table-wrap rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] shadow-[var(--wire-shadow-sm)] {class}" tabindex="0" role="region" aria-label="{caption}">
      <table class="wire-table wire-comparison-table min-w-[56rem]">
        <caption class="wire-visually-hidden">{caption}</caption>
        <thead>
          <tr>
            <th scope="col">Feature</th>
            {#each plans as plan}
              <th scope="col">{plan.name}</th>
            {/each}
          </tr>
        </thead>
        <tbody>
          {#each features as feature}
            <tr>
              <th scope="row">{feature.label}</th>
              {#each feature.values as value}
                <td>{value}</td>
              {/each}
            </tr>
          {/each}
        </tbody>
      </table>
    </div>
  }
}