---
import CardTitle from '@ui/CardTitle.astro'
import ProgressBg from '@ui/ProgressBg.astro'
import urls from '@data/urls.json'
---

<div class="card">
  <div class="card-body">
    <CardTitle>Top Pages</CardTitle>

    <table class="table table-sm table-borderless">
      <thead>
        <tr>
          <th>Page</th>
          <th class="text-end">Visitors</th>
        </tr>
      </thead>
      <tbody>
        {
          urls.slice(0, 8).map((url) => (
            <tr>
              <td>
                <ProgressBg value={parseFloat(url.bounce)} text={url.uri} />
              </td>
              <td class="w-1 fw-medium text-end">{url.visitors}</td>
            </tr>
          ))
        }
      </tbody>
    </table>
  </div>
</div>