```vue
<template>
  <div class="pagination" v-if="pageCount > 1">
    <!-- Previous button -->
    <button
        class="pagination-btn"
        :disabled="page <= 1"
        @click="goToPage(page - 1)"
    >
      <PhCaretLeft :size="18" />  Previous
    </button>

    <!-- First page -->
    <button
        v-if="showFirstPage"
        class="pagination-btn page-number"
        :class="{ active: page === 1 }"
        @click="goToPage(1)"
    >
      1
    </button>

    <!-- First ellipsis -->
    <span v-if="showFirstEllipsis" class="ellipsis">...</span>

    <!-- Page numbers around current page -->
    <button
        v-for="pageNum in visiblePages"
        :key="pageNum"
        class="pagination-btn page-number"
        :class="{ active: page === pageNum }"
        @click="goToPage(pageNum)"
    >
      {{ pageNum }}
    </button>

    <!-- Last ellipsis -->
    <span v-if="showLastEllipsis" class="ellipsis">...</span>

    <!-- Last page -->
    <button
        v-if="showLastPage"
        class="pagination-btn page-number"
        :class="{ active: page === pageCount }"
        @click="goToPage(pageCount)"
    >
      {{ pageCount }}
    </button>

    <!-- Next button -->
    <button
        class="pagination-btn"
        :disabled="page >= pageCount"
        @click="goToPage(page + 1)"
    >
      Next <PhCaretRight :size="18" />
    </button>

    <!-- Page info -->
    <div class="page-info">
      Page {{ page }} of {{ pageCount }} ({{ totalCount }} total items)
    </div>
  </div>
</template>

<script>
import {PhCaretLeft, PhCaretRight} from "@phosphor-icons/vue";

export default {
  name: "Pagination",
  components: {PhCaretLeft, PhCaretRight},
  props: {
    page: {
      type: Number,
      required: true,
      default: 1
    },
    pageCount: {
      type: Number,
      required: true,
      default: 1
    },
    totalCount: {
      type: Number,
      required: true,
      default: 0
    },
    maxVisiblePages: {
      type: Number,
      default: 5
    }
  },
  emits: ['page-change'],
  computed: {
    visiblePages() {
      const delta = Math.floor(this.maxVisiblePages / 2);
      let start = Math.max(2, this.page - delta);
      let end = Math.min(this.pageCount - 1, this.page + delta);

      // Adjust if we're near the beginning or end
      if (this.page <= delta + 1) {
        end = Math.min(this.pageCount - 1, this.maxVisiblePages);
      }
      if (this.page >= this.pageCount - delta) {
        start = Math.max(2, this.pageCount - this.maxVisiblePages + 1);
      }

      const pages = [];
      for (let i = start; i <= end; i++) {
        if (i !== 1 && i !== this.pageCount) {
          pages.push(i);
        }
      }
      return pages;
    },
    showFirstPage() {
      return this.pageCount > 1;
    },
    showLastPage() {
      return this.pageCount > 1 && this.pageCount !== 1;
    },
    showFirstEllipsis() {
      return this.visiblePages.length > 0 && this.visiblePages[0] > 2;
    },
    showLastEllipsis() {
      return this.visiblePages.length > 0 &&
          this.visiblePages[this.visiblePages.length - 1] < this.pageCount - 1;
    }
  },
  methods: {
    goToPage(pageNumber) {
      if (pageNumber >= 1 && pageNumber <= this.pageCount && pageNumber !== this.page) {
        this.$emit('page-change', pageNumber);
      }
    }
  }
}
</script>

<style scoped>
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 2.4rem 0;
  flex-wrap: wrap;
}

.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.8rem 1.6rem;
  border: 0 solid rgba(107, 134, 156, 0.1);
  background: transparent;
  color: #002F54;
  cursor: pointer;
  border-radius: 0.4rem;
  font-size: 1.4rem;
  font-family: inherit;
  transition: all 0.2s ease;
  min-width: 4rem;
}

.pagination-btn:hover:not(:disabled) {
  background: rgba(107, 134, 156, 0.1);
}

.pagination-btn:disabled {

  border-color: rgba(141, 179, 254, 0.2);
  color: rgba(0, 47, 84, 0.2);
  cursor: not-allowed;
}

.pagination-btn.active {
  background: #5AF0B4;

}

.page-number {
  font-weight: 500;
}

.ellipsis {
  padding: 0.8rem 0.4rem;
  color: #666;
  font-size: 1.6rem;
}

.page-info {
  margin-left: 1.6rem;
  font-size: 1.2rem;
  color: #6b7280;
  white-space: nowrap;
}
</style>