<!-- src/components/GeneralComponents/control/PageNavComponent.vue -->
<template>
    <div class="custom_nav">
        <div v-for="item in items" :key="item.code" class="nav_item" :class="{ active: item.code === currentCode }"
            @click="goToPage(item)">
            {{ item.label }}
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const props = defineProps({
    items: {
        type: Array,
        required: true
    },
    currentCode: {
        type: String,
        required: true
    }
})

const router = useRouter()

const goToPage = (item) => {
    if (item.code !== props.currentCode) {
        router.push(item.path)
    }
}
</script>

<style scoped lang="scss">
.custom_nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    background: #1f1f1f;
    padding: 4px 24px;
    border-radius: 12px;
    width: 100%;
    max-width: 1100px;
    margin: 16px auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.nav_item {
    padding: 8px 20px;
    border-radius: 20px;
    color: #ccc;
    background: #2a2a2a;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
        background: #3a3a3a;
        color: #fff;
    }

    &.active {
        background: #409eff;
        color: white;
        font-weight: bold;
    }
}
</style>
