import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import NavLinks from './NavLinks';

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

  return (
    <footer className="flex items-center justify-center w-full bg-common-layout">
      <div className="flex gap-96 w-full max-w-screen-xl px-10 py-52">
        <ul className="flex flex-col gap-16 mr-96">
          <li>
            <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>
          </li>
          <li>
            <a
              className="text-lg leading-5 text-white"
              href="mailto:propertyinform@gmail.com"
              target="_blank"
              rel="noreferrer"
            >
              propertyinform@gmail.com
            </a>
          </li>
          <li>
            <a className="text-lg leading-5 text-white" href="tel:(123) 456-78-90">
              (123) 456-78-90
            </a>
          </li>
        </ul>
        <ul className="flex flex-col gap-16 mt-[61px]">
          <NavLinks className="text-lg leading-5 text-white no-underline" />
        </ul>
      </div>
    </footer>
  );
}

export default memo(FooterLayout2);