<script setup lang="ts">
import { useDomainsStore } from '@/stores/domains'
const ds = useDomainsStore()
</script>

<template>
  <div class="pagination fsb">
    <HButton hollow
      @click="ds.prevPage"
      :disabled="ds.page <= 1"
    >
      <div class="fsb">
        <Icon name="prev" /> {{ (ds.page - 1 ?? 0) }}
      </div>
    </HButton>
    <span>{{ (ds.page ?? 0) }}</span>
    <HButton hollow
    @click="ds.nextPage"
    :disabled="ds.page >= ds.pages"
    >
      <div class="fsb">
        {{ (ds.page ?? 0) + 1 }} <Icon name="next" />
      </div>
    </HButton>
  </div>
</template>

<style>
  .pagination {
    padding: 1em;
    background: hsl(var(--bg20));
  }
</style>