<template>
    <div class="flex items-center justify-between p-4 bg-white border-t border-gray-300 rounded-b-lg">
      <!-- Previous Page Button -->
      <button
        @click="goToPage(currentPage - 1)"
        :disabled="currentPage === 1"
        class="px-4 py-2 text-sm font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600 disabled:bg-gray-300"
      >
        Previous
      </button>
  
      <!-- Page Numbers -->
      <div class="flex space-x-2">
        <button
          v-for="page in totalPages"
          :key="page"
          @click="goToPage(page)"
          :class="{'bg-blue-500 text-white': currentPage === page, 'bg-gray-100': currentPage !== page}"
          class="px-4 py-2 text-sm font-semibold rounded-lg hover:bg-blue-200"
        >
          {{ page }}
        </button>
      </div>
  
      <!-- Next Page Button -->
      <button
        @click="goToPage(currentPage + 1)"
        :disabled="currentPage === totalPages"
        class="px-4 py-2 text-sm font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600 disabled:bg-gray-300"
      >
        Next
      </button>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  // Props to accept pagination data
  const props = defineProps({
    totalItems: {
      type: Number,
      required: true
    },
    itemsPerPage: {
      type: Number,
      required: true
    }
  })
  
  const currentPage = ref(1)
  
  // Compute total number of pages
  const totalPages = computed(() => Math.ceil(props.totalItems / props.itemsPerPage))
  
  // Go to specific page
  const goToPage = (page) => {
    if (page >= 1 && page <= totalPages.value) {
      currentPage.value = page
      // Emit an event or perform an action to fetch the data for the selected page
      // e.g., fetchPageData(currentPage.value)
      console.log(`Fetching data for page: ${currentPage.value}`)
    }
  }
  </script>
  
  <style scoped>
  button:disabled {
    cursor: not-allowed;
  }
  </style>
  