---
interface Props {
  links: Array<{
    label: string;
    href: string;
    isActive?: boolean;
  }>;
  className?: string;
}

const { links, className = "" } = Astro.props;
---

<div class={`fixed top-10 inset-x-0 max-w-2xl mx-auto z-50 ${className}`}>
  <div class="relative backdrop-blur-sm">
    <div class="absolute inset-0 bg-white dark:bg-gray-900/70 shadow-lg rounded-full"></div>
    <nav class="relative">
      <ul class="flex items-center justify-center p-2 gap-2">
        {
          links.map((link) => (
            <li>
              <a
                href={link.href}
                class={`px-4 py-2 rounded-full font-medium transition-colors ${
                  link.isActive
                    ? "bg-color-primary-600 text-white dark:bg-color-dark-primary-600"
                    : "hover:bg-gray-100 text-gray-900 dark:text-gray-100 dark:hover:bg-gray-800"
                }`}
              >
                {link.label}
              </a>
            </li>
          ))
        }
      </ul>
    </nav>
  </div>
</div>

<script>
  // 简单的滚动动画效果
  document.addEventListener('scroll', () => {
    const navbar = document.querySelector('.fixed.top-10');
    if (!navbar) return;
    
    if (window.scrollY > 100) {
      navbar.classList.add('top-4');
      navbar.classList.remove('top-10');
    } else {
      navbar.classList.add('top-10');
      navbar.classList.remove('top-4');
    }
  });
</script> 