<template>
  <nav class="navigation">
    <button @click="$emit('prevPage')" :disabled="currentPage === 1">{{ __('navigation.previous') }}</button>
    <span>{{ __('navigation.page_of', { currentPage: currentPage, totalPages: totalPages }) }}</span>
    <button @click="$emit('nextPage')" :disabled="currentPage === totalPages">{{ __('navigation.next') }}</button>
  </nav>
</template>

<script setup>
const props = defineProps({
  currentPage: {
    type: Number,
    required: true,
  },
  totalPages: {
    type: Number,
    required: true,
  },
});

const emits = defineEmits(['prevPage', 'nextPage']);
</script>

<style scoped>
.navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: var(--color-background);
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: var(--color-text);
}

.navigation button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
}

.navigation button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.navigation span {
  font-size: 1.2em;
  font-weight: bold;
  color: var(--color-text);
}
</style>