component Table {
  props {
    class = ""
    caption = "Data table"
    responsive = true
    striped = false
    hoverable = true
    compact = false
  }

  view {
    <div class="wire-table-wrap rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] shadow-[var(--wire-shadow-sm)] {class}">
      <table
        class="wire-table min-w-[640px]"
        class:wire-table--striped='{striped}'
        class:wire-table--compact='{compact}'
        class:wire-table--hoverable='{hoverable}'
      >
        <caption class="wire-visually-hidden">{caption}</caption>
        <slot />
      </table>
    </div>
  }
}