<script setup lang="ts">
import BmsCard from '@/components/layout/BmsCard.vue';
import BmsContentPageLayout from '@/components/layout/BmsContentPageLayout.vue';
import BmsPagination from '@/components/table/BmsPagination.vue';
import { computed, ref } from 'vue';
import { pokemons } from '@/showroom/db.json';

const size = 5;
const paginatedPokemons = computed(() =>
  pokemons.slice(page.value * size, (page.value + 1) * size),
);
const page = ref(0);
</script>

<template>
  <BmsContentPageLayout>
    <div class="cards">
      <BmsCard
        v-for="pokemon in paginatedPokemons"
        :key="pokemon.id"
        class="card"
      >
        <h2>{{ pokemon.name }}</h2>
        {{ pokemon.type }}
      </BmsCard>
    </div>
    <BmsPagination
      :total="151"
      :pages="31"
      :sizes="[5, 10]"
      :currentPage="page"
      :currentSize="5"
      @next="page++"
      @prev="page--"
      @go="(i) => (page = i)"
    />
  </BmsContentPageLayout>
</template>

<style lang="scss" scoped>
.cards {
  display: flex;
  gap: 1em;
  .card {
    width: 500px;
  }
}
</style>
