web/src/components/header.tsx

'use client';
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { useTheme } from 'next-themes';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';
import { LanguageSelector } from '@/components/language-selector';
import { Moon, Sun, Menu, X } from 'lucide-react';
import { useEffect, useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

export function Header() {
  const { theme, setTheme } = useTheme();
  const { t } = useTranslation();
  const [mounted, setMounted] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    // Close mobile menu when route changes
    setMobileMenuOpen(false);
  }, [pathname]);

  const toggleTheme = () => {
    console.log('Toggle clicked, current theme:', theme);
    const newTheme = theme === 'dark' ? 'light' : 'dark';
    console.log('Setting theme to:', newTheme);
    setTheme(newTheme);
  };

  const logoSrc = !mounted ? '/logo-dark.svg' : theme === 'dark' ? '/logo-dark.svg' : '/logo-light.svg';
  const mobileLogoSrc = '/logo-splash.svg';

  const navLinks = [
    { href: '/', label: 'Swap' },
    { href: '/stake', label: 'Stake' },
    { href: '/unstake', label: 'Unstake' },
    { href: '/about', label: 'About' },
  ];

  return (
    <header className="border-b">
      <div className="container mx-auto px-4 py-4 flex items-center justify-between">
        <div className="flex items-center gap-3">
          {/* Desktop logo - just a link */}
          <Link href="/" className="hidden sm:block">
            <img
              src={logoSrc}
              alt="Liquidity Party"
              className="h-8 w-auto cursor-pointer"
            />
          </Link>

          {/* Mobile logo - toggles menu */}
          <button
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            className="sm:hidden focus:outline-none"
          >
            <img
              src={mobileLogoSrc}
              alt="Liquidity Party"
              className="h-8 w-8 cursor-pointer"
            />
            <span className="sr-only">Toggle menu</span>
          </button>

          <span className="bg-yellow-500/20 text-yellow-500 text-xs font-bold px-2 py-1 rounded border border-yellow-500/50">
            BETA
          </span>
        </div>

        <div className="flex items-center gap-2">
          {/* Desktop Navigation Links */}
          <nav className="hidden md:flex items-center gap-1 mr-2">
            {navLinks.map((link) => (
              <Link key={link.href} href={link.href}>
                <Button
                  variant="ghost"
                  size="sm"
                  className={`text-sm font-medium ${pathname === link.href ? 'bg-accent' : ''}`}
                >
                  {link.label}
                </Button>
              </Link>
            ))}
          </nav>

          {/* Language Selector - Hidden on small screens */}
          <div className="hidden sm:block">
            <LanguageSelector />
          </div>

          {/* Theme Toggle - Hidden on mobile */}
          <Button
            variant="ghost"
            size="icon"
            onClick={toggleTheme}
            type="button"
            className="hidden sm:flex"
          >
            <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
            <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
            <span className="sr-only">Toggle theme</span>
          </Button>

          {/* Wallet Connect - Always visible */}
          <ConnectButton />
        </div>
      </div>

      {/* Mobile Menu */}
      {mobileMenuOpen && (
        <div className="md:hidden border-t">
          <nav className="container mx-auto px-4 py-4 flex flex-col gap-2">
            {navLinks.map((link) => (
              <Link key={link.href} href={link.href}>
                <Button
                  variant="ghost"
                  className={`w-full justify-start text-base font-medium ${pathname === link.href ? 'bg-accent' : ''}`}
                >
                  {link.label}
                </Button>
              </Link>
            ))}
            <div className="flex items-center gap-2 pt-2 border-t mt-2">
              <div className="flex-1">
                <LanguageSelector />
              </div>
              <Button
                variant="ghost"
                size="icon"
                onClick={toggleTheme}
                type="button"
                className="flex-shrink-0"
              >
                <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
                <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
                <span className="sr-only">Toggle theme</span>
              </Button>
            </div>
          </nav>
        </div>
      )}
    </header>
  );
}