import { useState } from 'react';
import Link from 'next/link';
//icons
import ColorFulLogo from '../../public/icons/ccnColorFulLogo.svg';
import WhiteLogo from '../../public/icons/ccnWhiteLogo.svg';
import AboutIcon from '../../public/icons/about.svg';
import ContratarIcon from '../../public/icons/contract.svg';
import HomeIcon from '../../public/icons/home.svg';
import OfficesIcon from '../../public/icons/oficinas.svg';
import CompaniesIcon from '../../public/icons/office.svg';
import PlansIcon from '../../public/icons/planes.svg';
import SupportIcon from '../../public/icons/soporte.svg';
import { BiMenu } from 'react-icons/bi';
import { useTranslation } from 'next-i18next';

const NavBar: React.FC<{ currentRoute: string; backgroundColor?: string }> = ({
  currentRoute,
  backgroundColor = 'bg-primary'
}) => {
  const [showMobileNav, setShowMobileNav] = useState(false);
  const { t } = useTranslation('navbar');

  const navItems = [
    { name: t('home'), route: '/' },
    { name: t('companies'), route: '/empresas' },
    { name: t('about'), route: '/nosotros' },
    { name: t('offices'), route: '/oficinas' },
    { name: t('support'), route: '/soporte' },
    { name: t('plans'), route: '/planes' }
  ];

  const mobileNavItems = [
    { name: t('home'), route: '/', icon: HomeIcon },
    { name: t('companies'), route: '/empresas', icon: CompaniesIcon },
    { name: t('about'), route: '/nosotros', icon: AboutIcon },
    { name: t('offices'), route: '/oficinas', icon: OfficesIcon },
    { name: t('support'), route: '/soporte', icon: SupportIcon },
    { name: t('plans'), route: '/planes', icon: PlansIcon },
    { name: t('contractMobile'), route: '/contratar', icon: ContratarIcon }
  ];

  return (
    <>
      <div className={`flex sticky top-0 justify-end md:hidden z-20 ${backgroundColor} `}>
        <div className='p-4 rounded-full'>
          <BiMenu
            className='self-end w-9 h-9'
            fill={currentRoute === '/' ? '#367DEE' : '#FFFFFF'}
            onClick={() => setShowMobileNav(!showMobileNav)}
          />
        </div>
      </div>

      <div
        className={`hidden md:flex justify-center px-16 sticky top-0 z-20 text-lg 2xl:text-2xl ${backgroundColor} ${
          currentRoute === '/' ? 'text-customBlack' : 'text-background'
        }`}
      >
        <div className='hidden md:flex flex-row flex-1 justify-between max-w-10xl space-x-12'>
          <div>
            <Link aria-label='logo' href='/'>
              <span>
                {currentRoute === '/' ? (
                  <ColorFulLogo width='100' height='100' />
                ) : (
                  <WhiteLogo width='100' height='100' />
                )}
              </span>
            </Link>
          </div>
          <div className='flex flex-row items-center space-x-12 font-header'>
            <div className='space-x-9'>
              {navItems.map((item, i) => (
                <Link key={i} href={item.route}>
                  <span className={currentRoute === item.route ? 'font-bold' : ''}>{item.name}</span>
                </Link>
              ))}
            </div>
            <Link href='/contratar'>
              <button
                className={`g-primary-button text-lg 2xl:text-2xl block px-4 py-2 rounded ${
                  currentRoute === '/' ? 'bg-primary text-background' : 'bg-customOrange'
                }`}
                type='button'
              >
                {t('contract')}
              </button>
            </Link>
          </div>
        </div>
      </div>

      <div
        className={`flex flex-col transform duration-500 transition-all z-20 px-10 py-10 text-background 
        fixed left-0 top-0 bottom-0 space-y-7 md:hidden bg-primary
        ${showMobileNav ? 'translate-x-0' : '-translate-x-64'}`}
      >
        <WhiteLogo className='self-center' width='90' height='90' />
        {mobileNavItems.map((item, i) => (
          <Link key={i} href={item.route}>
            <span
              className={`flex items-center space-x-4 font-header ${currentRoute === item.route ? 'font-bold' : ''}`}
            >
              <item.icon width='25' height='25' fill='#FFFFFF' />
              <span>{item.name}</span>
            </span>
          </Link>
        ))}
      </div>
    </>
  );
};

export default NavBar;