---
import { menuItems, socialLinks } from '../data/links';

interface Props {
  alwaysOpen?: number;
}

const { alwaysOpen = 2 } = Astro.props;
---

<header class="logo-container">
  <a href="/"><img src="/img/conjure-logo.svg" alt="Conjure Logo" /></a>
</header>

<nav class="menu">
  <input type="checkbox" class="menu-open" name="menu-open" id="menu-open" />
  <label class="menu-open-button" for="menu-open">
    <span class="hamburger"></span>
    <span class="hamburger"></span>
    <span class="hamburger"></span>
  </label>

  <!-- Menu items -->
  {
    menuItems.map((item) => (
      <a href={item.href} class="menu-item has-tooltip-text">
        <span>{item.label}</span>
        <img src={item.icon} alt={item.label} />
      </a>
    ))
  }

  <!-- Social links -->
  {
    socialLinks.map((link, index) => {
      const isAlwaysOpen = index >= socialLinks.length - alwaysOpen;
      return (
        <a
          href={link.url}
          target="_blank"
          rel="noopener noreferrer"
          class={isAlwaysOpen ? 'menu-item-always-open' : 'menu-item'}
        >
          {link.class ? (
            <div class="icon-centerer">
              <img src={link.icon} alt={link.name} class={link.class} />
            </div>
          ) : (
            <img src={link.icon} alt={link.name} />
          )}
        </a>
      );
    })
  }
</nav>
