import { useTranslation } from 'react-i18next';
import { StyledLangButton, StyledNavbar, StyledNavBrand, StyledNavlinksWrapper } from './styles/Navbar.styled';
import { FaBookOpen, FaUser } from 'react-icons/fa';
import { JSX } from 'react';

interface NavLink {
  title: string;
  href: string;
  icon: JSX.Element;
}

const navlinks = [
  {
    title: 'about',
    href: '#about',
    icon: <FaUser />,
  },
  {
    title: 'projects',
    href: '#projects',
    icon: <FaBookOpen />,
  },
  // {
  //   title: 'contact',
  //   href: '#contact',
  //   icon: <FaRegComment />,
  // },
];

export default function Navbar() {
  const { t } = useTranslation();

  return (
    <StyledNavbar>
      <div className="navbar-content">
        <StyledNavBrand href="#">{t('navbar.title')}</StyledNavBrand>

        <Navlinks navlinks={navlinks} />
      </div>
    </StyledNavbar>
  );
}

function Navlinks(props: { navlinks: NavLink[] }) {
  const { t } = useTranslation();

  return (
    <StyledNavlinksWrapper>
      <ul>
        {props.navlinks.map((navlink) => (
          <li key={navlink.title}>
            <a href={navlink.href}>
              {navlink.icon}
              {t(`navbar.${navlink.title}`)}
            </a>
          </li>
        ))}
      </ul>

      <LanguageChoice />
    </StyledNavlinksWrapper>
  );
}

function LanguageChoice() {
  const { i18n } = useTranslation();

  function changeLanguage() {
    i18n.changeLanguage(i18n.language == 'pl' ? 'en' : 'pl');
  }

  return (
    <StyledLangButton aria-description="Change language" onClick={changeLanguage}>
      {i18n.language}
    </StyledLangButton>
  );
}
