import { useTranslation } from 'react-i18next';
import GlobeIcon from "../icons/GlobeIcon";
import MoonIcon from "../icons/MoonIcon";
import SunIcon from "../icons/SunIcon";
import { useLanguageToggle } from "../../hooks/useLanguageToggle";
import { useTheme } from "../../context/ThemeContext";

export default function Navbar({ onLoginClick }) {
  const { t } = useTranslation();
  const { language, toggleLanguage } = useLanguageToggle();
  const { theme, toggle: toggleTheme } = useTheme();

  return (
      <nav className="nk-nav">
        <span className="nk-logo">{t('app.name')}</span>

        <div className="nk-nav-right">
          <button className="nk-theme-btn" onClick={toggleTheme} title={theme === 'dark' ? t('sidebar.lightTheme') : t('sidebar.darkTheme')}>
            {theme === 'dark' ? <SunIcon /> : <MoonIcon />}
          </button>
          <button className="nk-lang-btn" onClick={toggleLanguage}>
            <GlobeIcon />
            {language === 'ru' ? 'EN' : 'RU'}
          </button>

          <button className="nk-nav-btn" onClick={onLoginClick}>
            {t('landing.login')}
          </button>
        </div>
      </nav>
  );
}