import React from 'react';
import classNames from 'classnames';
import { Container } from '@/components/shared';
import { APP_NAME } from '@/constants/app.constant';
import { PAGE_CONTAINER_GUTTER_X } from '@/constants/theme.constant';
import { useTranslation } from 'react-i18next';
import { HiOutlineLocationMarker, HiOutlineMail, HiOutlinePhone } from 'react-icons/hi';
import { Link } from 'react-router-dom';
import Logo from './Logo';

const FooterContent = ({ route }) => {
  const { t } = useTranslation();

  const CopyRight = ({ color, darkColor }) => {
    return (
      <>
        <div className={`text-sm ${color} flex items-center justify-center w-full dark:${darkColor}`}>
          <span className="mx-2  ">
            {t('COPYRIGHT')} &copy; {`${new Date().getFullYear()}`}
          </span>
          <Link to="https://www.nafith.com/" target="_blank">
            <span className="font-semibold  ">{t(`${APP_NAME}`)}</span>
          </Link>
          <span className="mx-2  ">
            {t(',')} {t('ALL_RIGHTS_RESERVED')}
          </span>
        </div>
      </>
    );
  };
  if (route === 'home') {
    return (
      <>
        <footer className=" text-white bg-nafithBlueColor-500 dark:bg-nafithDarkBlueColor-500 pt-4  h-[fit-content]">
          <div className="flex flex-wrap justify-center">
            <div className="lg:w-1/4 w-1/2 flex flex-col justify-center items-right px-10 space-y-2">
              <Logo mode="dark" className="  md:block" />
              <span className="flex items-center  ">
                <HiOutlineLocationMarker className="mx-2" />
                {t('NAFITH_CRN')}
              </span>
              <span className="flex items-center    ">
                <HiOutlinePhone className="mx-2" />
                {t('NAFITH_MOBILE')}
              </span>
              <a className="text-white hover:text-gray-300 text-center" href="mailto:onewb@nafith.com">
                <span className="flex items-center">
                  <HiOutlineMail className="mx-2" />
                  onewb@nafith.com
                </span>
              </a>
            </div>

            <div className="w-full md:w-1/4  flex flex-col justify-center items-right px-10 space-y-2">
              <div className="text-lg text-white  text-justify">
                {t('SPONSORED_BY')}
                <div className="flex  justify-start items-center">
                  <img className=" lg:max-w-[100px]max-w-[50px]" src="/img/others/un.svg" alt="un" />
                  <img
                    className=" lg:max-w-[300px] ms-3 max-w-[200px]"
                    src="/img/others/logo-ai-white.png"
                    alt="logo-omn"
                  />
                </div>
              </div>
              <div className="text-md  text-white  flex items-center">
                <img className=" max-w-[100px]" src="/img/others/blockchane.svg" alt="blockchane" />
                <span className="mx-2">{t('THIS_SYSTEM_USES_BLOCKCHAIN_TECHNOLOGY')}</span>
              </div>
            </div>
            <div className="w-full md:w-1/4 flex flex-col justify-center items-center"></div>
            <div className="w-full md:w-1/4 flex flex-col justify-center items-center"></div>
          </div>

          <div className="w-full flex flex-col md:h-10  justify-between flex-auto flex-wrap  justify-items mb-3 ">
            <div className="w-full">
              <hr className="my-2 border-t border-white opacity-25   w-full" />
            </div>

            <CopyRight color="text-white" />
          </div>
        </footer>
      </>
    );
  }

  return <CopyRight color="text-nafithBlueColor-500" darkColor="text-white" />;
};

export default function Footer({ pageContainerType, route }) {
  if (route === 'home') {
    return <FooterContent route={route} />;
  }
  return (
    <footer className={classNames(`footer flex flex-auto items-center h-16 ${PAGE_CONTAINER_GUTTER_X}`)}>
      {pageContainerType === 'contained' ? (
        <Container>
          <FooterContent />
        </Container>
      ) : (
        <FooterContent />
      )}
    </footer>
  );
}
