<!-- components/layout/ObjectsNavigation.vue -->
<template>
    <nav class="objects-navigation">
        <div class="nav-container">
            <!-- Основные ссылки -->
            <div class="nav-links">
                <NuxtLink to="/objects" class="nav-link" :class="{ active: $route.path === '/objects' }">
                    🏢 Все объекты
                </NuxtLink>
                <NuxtLink 
                to="/objects/my-objects" 
                class="nav-link"
                :class="{ active: $route.path === '/objects/my-objects' }">
                    📝 Мои объекты
                </NuxtLink>
                <NuxtLink to="/objects/create" class="nav-link" :class="{ active: $route.path === '/objects/create' }">
                    ➕ Добавить объект
                </NuxtLink>
            </div>

            <!-- Дополнительные действия -->
            <div class="nav-actions">
                <NuxtLink to="/" class="nav-action">
                    🏠 На главную
                </NuxtLink>
            </div>
        </div>
    </nav>
</template>

<script setup lang="ts">
</script>

<style scoped>
.objects-navigation {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 2rem;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.nav-link {
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    color: var(--text-primary);
}

.nav-link:hover {
    background: var(--bg-secondary);
    color: var(--primary-600);
    text-decoration: none;
}

.nav-link.active {
    background: var(--primary-500);
    color: var(--text-inverse);
    border-color: var(--primary-500);
}

.nav-actions {
    display: flex;
    gap: 1rem;
}

.nav-action {
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.nav-action:hover {
    color: var(--primary-500);
    text-decoration: none;
}

/* Адаптивность */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        gap: 1rem;
        padding: 0.75rem 0;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .nav-link {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .nav-actions {
        width: 100%;
        justify-content: center;
    }
}
</style>