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

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

  return (
    <header className="fixed z-[10000] flex items-center justify-center w-full h-72 px-10 bg-primary-light">
      <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">
          <Links className="text-lg leading-5 text-common-layout no-underline" />
        </nav>

        {props.isAuthenticated || (
          <div className="flex gap-32 items-center">
            <Link className="text-secondary-main" to="/sign-in">
              {t('sign_in')}
            </Link>
            <Link
              className="flex gap-7 items-center px-24 py-10 text-lg leading-5 text-primary-light bg-secondary-main rounded-2xl shadow hover:shadow-hover hover:shadow-secondary-main ease-in-out duration-300"
              to="/sign-up"
            >
              <span>{t('sign_up')}</span>
              <FuseSvgIcon>heroicons-outline:login</FuseSvgIcon>
            </Link>
          </div>
        )}
      </div>
    </header>
  );
}

export default memo(HeaderLayout2);