---
import ThemeToggle from './ThemeToggle.astro';

const currentPath = Astro.url.pathname;
---

<nav>
  <div class="container">
    <div class="nav-wrapper">
      <a href="/" class="nav-brand">
        <img src="/logo-dark.png" alt="CC24-Hub" class="nav-logo nav-logo-light" />
        <img src="/logo-white.png" alt="CC24-Hub" class="nav-logo nav-logo-dark" />
        <span style="font-weight: 600; font-size: 1.125rem;">CC24-Hub</span>
      </a>
      
      <ul class="nav-links">
        <li>
          <a href="/" class={`nav-link ${currentPath === '/' ? 'active' : ''}`}>
            ~/
          </a>
        </li>
        <li>
          <a href="/knowledgebase" class={`nav-link ${currentPath === '/knowledgebase' ? 'active' : ''}`}>
            ~/knowledgebase
          </a>
        </li>
        <li>
          <a href="/status" class={`nav-link ${currentPath === '/status' ? 'active' : ''}`}>
            ~/status
          </a>
        </li>
        <li>
          <a href="/about" class={`nav-link ${currentPath === '/about' ? 'active' : ''}`}>
            ~/about
          </a>
        </li>
        <li>
          <ThemeToggle />
        </li>
      </ul>
    </div>
  </div>
</nav>

<style>
  /* Logo theme switching */
  .nav-logo-light {
    display: block;
  }
  
  .nav-logo-dark {
    display: none;
  }
  
  [data-theme="dark"] .nav-logo-light {
    display: none;
  }
  
  [data-theme="dark"] .nav-logo-dark {
    display: block;
  }
  
  /* Make brand clickable */
  .nav-brand {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
  }
  
  .nav-brand:hover {
    text-decoration: none;
    opacity: 0.8;
  }
</style>