---
import Icon from '@ui/Icon.astro'
import Sparkline from '@ui/Sparkline.astro'
import CardTitle from '@ui/CardTitle.astro'
import urls from '@data/urls.json'
import { formatNumber } from '@shared/lib/string-format'
---

<div class="card">
  <div class="card-header">
    <CardTitle>Most visited pages</CardTitle>
  </div>
  <div class="card-table table-responsive">
    <table class="table table-vcenter">
      <thead>
        <tr>
          <th>Page name</th>
          <th>Visitors</th>
          <th>Unique</th>
          <th colspan="2">Bounce rate</th>
        </tr>
      </thead>

      {
        urls.slice(0, 6).map((url, index) => (
          <tr>
            <td>
              {url.uri}
              <a href="#" class="ms-1" aria-label="Open website">
                <Icon name="link" inline />
              </a>
            </td>
            <td class="text-secondary">{formatNumber(url.visitors)}</td>
            <td class="text-secondary">{formatNumber(url.unique)}</td>
            <td class="text-secondary">{url.bounce}</td>
            <td class="text-end w-1">
              <Sparkline values={url.data} id={`bounce-rate-${index + 1}`} size="sm" color="primary" ariaLabel={`Bounce rate trend for ${url.uri}`} />
            </td>
          </tr>
        ))
      }
    </table>
  </div>
</div>