'use client'

import Link from 'next/link'
import { useState, useEffect } from 'react'
import ThreeLogo from './ThreeLogo'
import ThemeToggle from './ThemeToggle'

export default function BlogHeader() {
  const [isScrolled, setIsScrolled] = useState(false)

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 0)
    }

    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  return (
    <header className={`sticky top-0 z-50 transition-all duration-300 ${
      isScrolled 
        ? 'bg-white/80 dark:bg-carbon-950/80 backdrop-blur-md border-b border-carbon-200/50 dark:border-carbon-800/50' 
        : 'bg-white/20 dark:bg-carbon-950/20 backdrop-blur-sm'
    }`}>
      <nav className="blog-container py-4">
        <div className="flex items-center justify-between">
          <Link href="/" className="flex items-center space-x-3 group">
            <div className="w-14 h-14 group-hover:scale-110 transition-transform">
              <ThreeLogo className="w-full h-full" />
            </div>
            <div className="flex flex-col">
              <span className="font-logo font-semibold text-lg leading-none text-carbon-900 dark:text-carbon-100">CHORUS</span>
              <span className="text-carbon-600 dark:text-carbon-500 text-xs font-medium">PING!</span>
            </div>
          </Link>

          <div className="hidden md:flex items-center space-x-8">
            <Link 
              href="/" 
              className="text-carbon-600 dark:text-carbon-300 hover:text-carbon-900 dark:hover:text-carbon-100 transition-colors font-medium"
            >
              All Posts
            </Link>
            <Link 
              href="/tags" 
              className="text-carbon-600 dark:text-carbon-300 hover:text-carbon-900 dark:hover:text-carbon-100 transition-colors font-medium"
            >
              Topics
            </Link>
            <Link 
              href="https://chorus.services" 
              className="text-carbon-600 dark:text-carbon-300 hover:text-carbon-900 dark:hover:text-carbon-100 transition-colors font-medium"
            >
              About CHORUS
            </Link>
          </div>

          <div className="flex items-center space-x-4">
            <ThemeToggle />
            <Link
              href="https://chorus.services"
              className="px-4 py-2 bg-carbon-900 dark:bg-mulberry-700 hover:bg-carbon-800 dark:hover:bg-mulberry-600 text-white dark:text-mulberry-100 rounded-lg font-medium transition-colors text-sm"
            >
              Join Waitlist
            </Link>
          </div>
        </div>
      </nav>
    </header>
  )
}