import { Shield, Github, BookOpen, Moon, Sun } from 'lucide-react';
import styles from './Navbar.module.css';

export default function Navbar({ theme = 'dark', onToggleTheme }) {
  const isLight = theme === 'light';

  return (
    <nav className={styles.nav}>
      <div className={styles.inner}>
        <a href="#top" className={styles.brand}>
          <div className={styles.logoMark}>
            <Shield size={18} strokeWidth={2.5} />
          </div>
          <div className={styles.brandText}>
            <span className={styles.brandName}>UAIDE</span>
            <span className={styles.brandSub}>Unified AI Origin Detection Engine</span>
          </div>
        </a>

        <div className={styles.actions}>
          <button
            type="button"
            className={styles.themeToggle}
            onClick={onToggleTheme}
            aria-label={`Switch to ${isLight ? 'dark' : 'light'} theme`}
            title={`Switch to ${isLight ? 'dark' : 'light'} theme`}
          >
            {isLight ? <Moon size={15} /> : <Sun size={15} />}
            <span>{isLight ? 'Dark' : 'Light'} Mode</span>
          </button>
          <a href="#" className={styles.navLink} aria-label="Documentation" title="Research paper coming soon">
            <BookOpen size={15} />
            <span>Docs</span>
          </a>
          <a href="https://github.com/Deshna24/UAIDE" target="_blank" rel="noopener noreferrer" className={styles.navLink} aria-label="GitHub Repository">
            <Github size={15} />
            <span>GitHub</span>
          </a>
        </div>
      </div>
    </nav>
  );
}