---
import { fetchMenu } from '@api/menu';

interface Props {
    menuId: number;
}

const { menuId } = Astro.props;

// Получаем меню по ID
const menu = await fetchMenu({ id: menuId });

if (!menu) {
    return;
}

// Создаем градиент для верхней линии
const totalItems = menu.menuItems.nodes.length;
const gradientStops = menu.menuItems.nodes.map((item, index) => {
    const colorClass = item.menuItemColor || 'black';
    const startPercent = (index / totalItems) * 100;
    const endPercent = ((index + 1) / totalItems) * 100;
    return `var(--color-${colorClass}) ${startPercent}%, var(--color-${colorClass}) ${endPercent}%`;
}).join(', ');
---

<nav class="primary-nav" aria-label="Main navigation">
    <div class="primary-nav__content">
        <button class="primary-nav__burger" aria-label="Toggle menu"></button>
        <ul class="primary-nav__list">
            {menu.menuItems.nodes.map(item => {
                const colorClass = item.menuItemColor ? `color-${item.menuItemColor}` : '';
                return (
                    <li class="primary-nav__item" key={item.id}>
                        <a 
                            href={item.url} 
                            class={`primary-nav__link ${colorClass}`}
                            target={item.target || '_self'}
                        >
                            {item.label}
                        </a>
                    </li>
                );
            })}
        </ul>
    </div>
</nav>

<style>
    .primary-nav {
        margin: 12px 0;
        position: relative;
        border-bottom: 1px solid black; 
    }

    .primary-nav::before,
    .primary-nav::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        background-color: #000;
    }


    .primary-nav__content {
        display: flex;
        align-items: center;
        position: relative;
        z-index: 1;
    }

    .primary-nav__burger {
        width: 60px;
        height: 48px;
        border-right: 1px solid silver;
        margin: .4rem 0;
        cursor: pointer;
        flex-shrink: 0;
        transition: opacity 0.2s ease;
        background-image: url('data:image/svg+xml;utf8,<svg width="23" height="16" viewBox="0 0 23 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H23V2H0V0Z" fill="%23000000"/><path d="M0 7H23V9H0V7Z" fill="%23000000"/><path d="M0 14H23V16H0V14Z" fill="%23000000"/></svg>');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 23px 16px;
    }

    .primary-nav__burger:hover {
        opacity: 0.7;
    }

    .primary-nav__list {
        display: none;
        flex: 1;
        font-size: .875rem;
        font-weight: bold;
        text-transform: uppercase;
        gap: 0;
        margin: 0;
        list-style: none;
        align-items: center;
    }

    .primary-nav__item {
        flex: 0 0 auto;
        position: relative;
        height: 100%;
    }

    .primary-nav__link {
        text-decoration: none;
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 1rem;
        transition: border-top 0.2s ease;
        border-top: 3px solid transparent;
        position: relative;
    }

    .primary-nav__link:hover {
        border-top-color: currentColor;
    }

    /* Десктоп */
    @media (min-width: 768px) {
        .primary-nav__list {
            display: flex;
        }
        
        .primary-nav__link::before {
            content: '';
            position: absolute;
            top: -3px; /* Выровнено с верхней границей навигации */
            left: 0;
            right: 0;
            height: 3px;
            background-color: inherit;
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        
        .primary-nav__link:hover::before {
            opacity: 1;
        }
    }
</style>