import FuseSvgIcon from '@fuse/core/FuseSvgIcon/FuseSvgIcon';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import linksConfigLayout2 from './linksLayout2Config';

function HeaderLayout2(props) {
  const { t } = useTranslation('layout2');

  return (
    <header className="fixed z-50 flex items-center justify-center w-full h-72 px-10 bg-white">
      <div className="flex justify-between max-w-screen-xl w-full">
        <Link to="/">
          <img
            className="max-w-[88px] max-h-[45px]"
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/600px-Instagram_icon.png"
            alt={t('logo_alt')}
          />
        </Link>
        <nav className="flex grow justify-center gap-72 items-center">
          {linksConfigLayout2.map((path) => (
            <Link
              className="text-lg leading-5 text-slate-800 no-underline"
              to={`/${path}`}
              key={path}
            >
              {t(path)}
            </Link>
          ))}
        </nav>
        {props.isAuthenticated || (
          <div className="flex gap-32 items-center">
            <Link className="text-indigo-400" to="/sign-in">
              {t('sign_in')}
            </Link>
            <Link
              className="flex gap-7 items-center px-24 py-10 text-lg leading-5 text-white bg-indigo-400 rounded-2xl"
              to="/sign-up"
            >
              <span>{t('sign_up')}</span>
              <FuseSvgIcon>heroicons-outline:login</FuseSvgIcon>
            </Link>
          </div>
        )}
      </div>
    </header>
  );
}

export default memo(HeaderLayout2);