<template>
  <div class="cards-grid">
    <div v-for="(product, key) in products" :key="product.id">
      <ProductCard :key="key" :product="product" />
    </div>
    <div class="c-pagination">
      <BPagination 
        v-model="currentPage"
        :v-if="relatedProducts"
        :total-rows="rows"
        :per-page="perPage"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    relatedProducts: {
      type: Array,
      default: () => [],
    },
    productsPerPage: {
      type: Number,
      default: 8,
    },
  },
  data() {
    return {
      currentPage: 1,
      perPage: this.productsPerPage ? this.productsPerPage : 8,
      //rows: this.relatedProducts ? this.relatedProducts.length : 0,
    }
  },
  computed: {
    rows() {
      return Array.isArray(this.relatedProducts) ? this.relatedProducts.length : 0
    },
    products() {
      const initial = (this.currentPage - 1) * this.perPage
      const final = this.currentPage * this.perPage
      const items = this.relatedProducts ? this.relatedProducts.slice(initial, final) : []
      return items
    },
  },
}
</script>

<style lang="scss" scoped>
.cards-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 32px var(--spacing-p-8, 32px);
    align-self: stretch;
    flex-wrap: wrap;
    margin-top: 2rem;
  }
  .c-pagination {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 4rem;
  }
</style>
