---
export interface Props {
  links?: Array<{ name: string; url: string }>;
  class?: string;
}

const defaultLinks = [
    { name: 'Услуги', url: '/services' },
    { name: 'Кейсы', url: '/cases' },
    { name: 'Блог', url: '/blog' },
    { name: 'Отзывы', url: '/reviews' },
    { name: 'Контакты', url: '/contacts' },
];

const { 
  links = defaultLinks,
  class: className = '',
}: Props = Astro.props;
---

<nav class={className}>
    <ul class="nav-list">
        {links.map((link) => (
            <li>
                <a href={link.url} class="nav-link">{link.name}</a>
            </li>
        ))}
    </ul>
</nav>

<style>
    .nav-list {
        display: flex;
        gap: 2.5rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-link {
        color: #535e6c;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.95rem;
        transition: color 0.2s ease, background-position 0.3s ease;
        background-image: linear-gradient(to right, #1e3050 0%, #1e3050 100%);
        background-size: 0% 2px;
        background-repeat: no-repeat;
        background-position: left bottom;
        padding-bottom: 2px;
    }

    .nav-link:hover {
        color: #1e3050;
        background-size: 100% 2px;
    }

    /* Адаптив: скрываем меню на мобильных */
    @media (max-width: 992px) {
        .nav-list {
            display: none;
        }
    }
</style>