import React, { cloneElement } from 'react';
//import { Avatar } from '@/components/ui'
import Logo from '@/components/template/Logo';
import { APP_NAME } from '@/constants/app.constant';
import { useTranslation } from 'react-i18next';
import useDarkMode from '@/utils/hooks/useDarkMode';

const Side = ({ children, content, ...rest }) => {
  const { t } = useTranslation();
  const [isDark] = useDarkMode();

  return (
    <div className="grid lg:grid-cols-3 h-full">
      <div
        className="bg-no-repeat bg-cover py-6 px-16 flex-col justify-between hidden lg:flex"
        style={
          !isDark
            ? {
                backgroundImage: `url('/img/others/auth-side-bg.jpg')`,
              }
            : null
        }
      >
        <Logo mode="dark" width={200} height={200} />
        <div>
          <p className="text-lg text-white  text-justify">{t('SIDE_MEESAGE')}</p>
          <br />
          <p className="text-lg text-white  text-justify">{t('SIDE_MEESAGE2')}</p>
        </div>
        <div>
          <div className="text-lg mb-3 text-white  text-justify">
            {t('SPONSORED_BY')}
            <div className="flex  justify-start items-center">
              <img className=" max-w-[100px]" src="/img/others/un.svg" alt="un" />
              <img className=" max-w-[300px] ms-3" src="/img/others/logo-ai-white.png" alt="logo-omn" />
            </div>
          </div>
          <div className="text-md  text-white  flex items-center">
            <img src="/img/others/blockchane.svg" alt="blockchane" width="20" height="20" />
            <span className="mx-2">{t('THIS_SYSTEM_USES_BLOCKCHAIN_TECHNOLOGY')}</span>
          </div>
        </div>
        <span className="text-white">
          {t('COPYRIGHT')} &copy; {`${new Date().getFullYear()}`}{' '}
          <span className="font-semibold">{t(`${APP_NAME}`)}</span>
          {' ' + t('ALL_RIGHTS_RESERVED')}
        </span>
      </div>
      <div className="col-span-2 flex flex-col justify-center items-center bg-nafithBlueColor-100 dark:bg-gray-800">
        <div className="xl:min-w-[450px] px-2">
          <div className="mb-8">{content}</div>
          {children ? cloneElement(children, { ...rest }) : null}
        </div>
      </div>
    </div>
  );
};

export default Side;
