'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 } from 'lucide-react';
import { useEffect, useState } from 'react';
import Link from 'next/link';

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

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

  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';

  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">
          <Link href="/">
            <img
              src={logoSrc}
              alt="Liquidity Party"
              className="h-8 w-auto cursor-pointer"
            />
          </Link>
          <span className="bg-yellow-500/20 text-yellow-500 text-xs font-bold px-2 py-1 rounded border border-yellow-500/50">
            BETA TEST
          </span>
        </div>

        <div className="flex items-center gap-2">
          {/* Navigation Links */}
          <nav className="hidden md:flex items-center gap-1 mr-2">
            <Link href="/">
              <Button variant="ghost" size="sm" className="text-sm font-medium">
                Swap
              </Button>
            </Link>
            <Link href="/about">
              <Button variant="ghost" size="sm" className="text-sm font-medium">
                About
              </Button>
            </Link>
          </nav>

          {/* Language Selector */}
          <LanguageSelector />

          {/* Theme Toggle */}
          <Button variant="ghost" size="icon" onClick={toggleTheme} type="button">
            <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 */}
          <ConnectButton />
        </div>
      </div>
    </header>
  );
}