<template>
    <nav aria-label="Page navigation">
        <ul class="pagination pagination-rounded justify-content-center">
            <!-- 첫 페이지 이동 -->
            <li
                class="page-item first"
                @click="emitPageChange(1)"
                :class="{ disabled: isFirstPage }"
            >
                <a class="page-link" href="javascript:void(0);">
                <i class="tf-icon bx bx-chevrons-left bx-sm"></i>
                </a>
            </li>

            <!-- 이전 페이지 이동 -->
            <li
                class="page-item prev"
                @click="emitPageChange(navigateFirstPage-1)"
                :class="{ disabled: !hasPreviousPage }"
            >
                <a class="page-link" href="javascript:void(0);">
                <i class="tf-icon bx bx-chevron-left bx-sm"></i>
                </a>
            </li>

            <!-- 페이지 번호들 -->
            <li
                v-for="page in navigatepageNums"
                :key="page"
                :class="['page-item', { active: page === currentPage }]"
                @click="emitPageChange(page)"
            >
                <a class="page-link" href="javascript:void(0);">{{ page }}</a>
            </li>

            <!-- 다음 페이지 이동 -->
            <li
                class="page-item next"
                @click="emitPageChange(navigateLastPage+1)"
                :class="{ disabled: !hasNextPage }"
            >
                <a class="page-link" href="javascript:void(0);">
                <i class="tf-icon bx bx-chevron-right bx-sm"></i>
                </a>
            </li>

            <!-- 마지막 페이지 이동 -->
            <li
                class="page-item last"
                @click="emitPageChange(pages)"
                :class="{ disabled: isLastPage }"
            >
                <a class="page-link" href="javascript:void(0);">
                <i class="tf-icon bx bx-chevrons-right bx-sm"></i>
                </a>
            </li>
        </ul>
    </nav>
  </template>


  <script setup>
  import { defineProps, defineEmits } from 'vue';

  // Props 정의
  const props = defineProps({
    currentPage: {
      type: Number,
      required: true
    },
    pages: {
      type: Number,
      required: true
    },
    prePage: {
      type: Number,
      required: true
    },
    nextPage: {
      type: Number,
      required: true
    },
    isFirstPage: {
      type: Boolean,
      required: true
    },
    isLastPage: {
      type: Boolean,
      required: true
    },
    hasPreviousPage: {
      type: Boolean,
      required: true
    },
    hasNextPage: {
      type: Boolean,
      required: true
    },
    navigatePages: {
      type: Number,
      required: true
    },
    navigatepageNums: {
      type: Array,
      required: true
    },
    navigateFirstPage: {
      type: Number,
      required: true
    },
    navigateLastPage: {
      type: Number,
      required: true
    }
  });

  // 이벤트 정의
  const emit = defineEmits(['update:currentPage']);

  // 페이지 변경 메서드
  const emitPageChange = (page) => {
    if (page !== props.currentPage && page >= 1 && page <= props.pages) {
      emit('update:currentPage', page);
    }
  };
  </script>
