<script lang="ts">
  import { getPageNumbers } from "$lib/utils";

  export let currentPage: number;
  export let totalPages: number;
  /** Called with the target page number when the user clicks a page control. */
  export let onNavigate: (page: number) => void;

  $: pageNumbers = getPageNumbers(currentPage, totalPages);
</script>

{#if totalPages > 1}
  <nav class="pagination" aria-label="Pagination">
    <button
      class="page-btn"
      disabled={currentPage <= 1}
      on:click={() => onNavigate(currentPage - 1)}
      aria-label="Previous page"
    >
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        width="16"
        height="16"
      >
        <path d="M15 18l-6-6 6-6" />
      </svg>
    </button>

    {#each pageNumbers as p}
      {#if p === "..."}
        <span class="page-ellipsis">…</span>
      {:else}
        <button
          class="page-btn"
          class:active={p === currentPage}
          on:click={() => onNavigate(p as number)}
          aria-current={p === currentPage ? "page" : undefined}
        >
          {p}
        </button>
      {/if}
    {/each}

    <button
      class="page-btn"
      disabled={currentPage >= totalPages}
      on:click={() => onNavigate(currentPage + 1)}
      aria-label="Next page"
    >
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        width="16"
        height="16"
      >
        <path d="M9 18l6-6-6-6" />
      </svg>
    </button>
  </nav>
{/if}

<style>
  .pagination {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: 1px solid transparent;
    color: var(--text-secondary);
    transition: all 0.12s;
  }

  .page-btn:hover:not(:disabled) {
    background: var(--surface-hover, rgba(255, 255, 255, 0.06));
    color: var(--text-primary);
  }

  .page-btn.active {
    background: var(--accent-primary, #3b82f6);
    color: #fff;
    border-color: transparent;
    font-weight: 600;
  }

  .page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  .page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    color: var(--text-tertiary, rgba(255, 255, 255, 0.3));
    font-size: 12px;
  }
</style>
