---
// ComparisonTable — horizontal-scroll wrapper for wide comparison tables.
// Used by /models/ and /rules/ pages where tables become unreadable on a
// phone without horizontal scroll.
//
// The pattern from chapters.css and full-guide/audit.css:
//   <div class="table-wrap">
//     <table style="min-width: ...">...</table>
//   </div>
// with `.table-wrap { overflow-x: auto }`.
//
// Callers pass the table via the default slot; the wrapper class adds the
// scroll behaviour and hairline border so the wrapper itself looks
// intentional, not like an overflow leak.

interface Props {
  /** Minimum width on the inner table. Forces horizontal scroll below this
   *  width rather than squashing columns into illegibility. */
  minWidth?: string;
}

const { minWidth = '640px' } = Astro.props;
---

<div class="table-wrap">
  <div class="inner" style={`min-width: ${minWidth}`}>
    <slot />
  </div>
</div>

<style>
  .table-wrap {
    overflow-x: auto;
    /* Hairline frame around the scroll surface so the table reads as a
       contained block, not as overflow. Matches chapters.css `.grid` style. */
    background: var(--line);
    border: 1px solid var(--line);
  }

  /* The inner element paints over the parent's 1px seams, leaving hairline
     dividers between any table cells the caller adds. */
  .inner {
    background: var(--paper);
  }

  /* Slot content is the caller's <table>. We don't restyle it — the call
     site owns column widths and headings. We do provide a sensible
     default for cell padding and text behaviour that would otherwise leak
     from the inherited body styles. */
  .inner :global(table) {
    width: 100%;
    border-collapse: collapse;
    color: var(--ink);
    font-size: var(--step-1);
  }

  .inner :global(th),
  .inner :global(td) {
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
  }

  /* Long words inside cells need to wrap, not push the column wider than
     min-width allows. overflow-wrap:anywhere matches audit-ui.mjs's
     expectation for table-style layouts. */
  .inner :global(th),
  .inner :global(td) {
    overflow-wrap: anywhere;
  }

  .inner :global(th) {
    color: var(--red);
    font:
      700 var(--step-0) ui-monospace,
      monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
</style>