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

interface Props {
  active?: 'home' | 'docs';
}

const { active = 'home' } = Astro.props;
---

<nav class="sticky top-0 z-50 bg-bg">
  <div class="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
    <a href="/" class="hover:opacity-80 transition-opacity" aria-label="Feynman">
      <AsciiLogo size="nav" />
    </a>
    <div class="flex items-center gap-6">
      <a href="/docs/getting-started/installation"
        class:list={["text-sm transition-colors", active === 'docs' ? 'text-text-primary' : 'text-text-muted hover:text-text-primary']}>
        Docs
      </a>
      <a href="https://github.com/getcompanion-ai/feynman" target="_blank" rel="noopener"
        class="text-sm text-text-muted hover:text-text-primary transition-colors">
        GitHub
      </a>
      <ThemeToggle />
    </div>
  </div>
</nav>