<script lang="ts">
  export let prevHref: string | null = null;
  export let nextHref: string | null = null;
</script>

<nav class="pagination" aria-label="Paginación">
  {#if prevHref}
    <a class="link" rel="prev" href={prevHref}>Anterior</a>
  {/if}
  {#if nextHref}
    <a class="link" rel="next" href={nextHref}>Siguiente</a>
  {/if}
</nav>

<style>
  .pagination {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }
  .link {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    text-decoration: none;
  }
  .link:hover,
  .link:focus-visible {
    box-shadow: var(--shadow-sm);
  }
</style>
