import React from 'react';
import BNNLogo from '../assets/bnnlogo.png';
import clsx from 'clsx';
import { useTranslation } from 'react-i18next';
import { useLocation, useNavigate } from 'react-router-dom';

interface LanguageSelectorProps {
  icon: string;
  text: string;
  isActive?: boolean;
  onClick: () => void;
}

function LanguageSelector({
  icon,
  text,
  isActive,
  onClick,
}: LanguageSelectorProps) {
  return (
    <button
      type="button"
      className={clsx(
        'border border-white py-[6px] px-[14px] rounded-full flex items-center space-x-[6px] font-semibold text-sm cursor-pointer transition-colors outline-none',
        {
          'bg-white text-[#002D4B] shadow-sm': isActive,
          'text-white hover:bg-white/20 hover:text-white': !isActive,
        }
      )}
      onClick={onClick}
    >
      <span className="text-base leading-none">{icon}</span>
      <span>{text}</span>
    </button>
  );
}

export default function Header() {
  const { i18n } = useTranslation();
  const navigate = useNavigate();
  const location = useLocation();

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };

  // Clicking BNN Logo always returns to Main Menu Pilihan Divisi (/group/main)
  const backToDivisionMenu = () => {
    if (location.pathname !== '/group/main') {
      navigate('/group/main');
    }
  };

  const currentLanguage = i18n.language;

  return (
    <div className="flex items-center pb-[20px] w-full">
      <div className="flex space-x-[20px] items-center">
        <img
          className="w-[54px] h-[54px] cursor-pointer hover:scale-105 transition-transform"
          src={BNNLogo}
          alt="bnn"
          onClick={backToDivisionMenu}
        />
        <div className="flex space-x-[8px] items-center">
          <LanguageSelector
            icon="🇮🇩"
            text="Indonesia"
            isActive={currentLanguage === 'id'}
            onClick={() => changeLanguage('id')}
          />
          <LanguageSelector
            icon="🇬🇧"
            text="English"
            isActive={currentLanguage === 'en'}
            onClick={() => changeLanguage('en')}
          />
        </div>
      </div>
    </div>
  );
}