<template>
  <div v-if="links.length > 3" class="flex flex-col sm:flex-row sm:justify-between sm:items-center space-y-2 sm:space-y-0 w-full">
    <!-- Selector de Registros por Página -->
    <div class="flex items-center justify-center space-x-2 w-full sm:w-auto">
      <div class="flex items-center space-x-2">
        <label for="perPage" class="text-sm text-gray-600 ">Mostrar:</label>
        <select
          id="perPage"
          v-model="selectedPerPage"
          @change="updatePerPage"
          class="px-2 py-1 border rounded text-sm w-16"
        >
          <option v-for="n in perPageOptions" :key="n" :value="n">{{ n }}</option>
        </select>
        <span class="text-sm text-gray-600 ">registros</span>
      </div>
    </div>

    <!-- Paginación -->
    <div class="w-full sm:w-auto overflow-x-auto sm:overflow-visible">
      <div class="flex flex-wrap justify-center sm:justify-start -mb-1">
        <template v-for="(link, key) in links" :key="key">
          <!-- Link inactivo (sin URL) -->
          <span
            v-if="!link.url"
            v-html="link.label"
            class="px-2 py-1 mr-1 mb-1 text-sm text-gray-400 rounded border"
          ></span>

          <!-- Link activo (con URL) -->
          <a
            v-else
            href="#"
            v-html="link.label"
            @click.prevent="navigate(link.url)"
            class="px-2 py-1 mr-1 mb-1 leading-4 rounded border font-8 transition-colors duration-200
              bg-transparent  text-zinc-600 hover:bg-gray-200 hover:text-zinc-900
              focus:border-white focus:text-zinc-900 focus:bg-gray-300"
            :class="{ 
              'bg-gray-300 text-zinc-900 font-bold': link.active 
            }"
          ></a>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  links: Array,
  perPage: Number,
});

const emit = defineEmits(["page-change", "per-page-change"]);

// Opciones de registros por página (10, 20, ..., 100)
const perPageOptions = ref([3, 7, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]);

// Valor seleccionado para la cantidad de registros por página
const selectedPerPage = ref(props.perPage || 10);

// Emitir el evento para cambiar la cantidad de registros por página
const updatePerPage = () => {
  emit("per-page-change", selectedPerPage.value);
};

// Emitir el evento para cambiar la página
const navigate = (url) => {
  const page = new URL(url).searchParams.get("page");
  emit("page-change", page);
};
</script>