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 SmallSide = ({ children, content, ...rest }) => {
  const { t } = useTranslation();

  const registrationMessages = [
    t('REGISTRATION_MEESAGE_1'),
    t('REGISTRATION_MEESAGE_2'),
    t('REGISTRATION_MEESAGE_3'),
    t('REGISTRATION_MEESAGE_4'),
    t('REGISTRATION_MEESAGE_5'),
    t('REGISTRATION_MEESAGE_6'),
    t('REGISTRATION_MEESAGE_7'),

    // Add more registration messages here
  ];
  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" />

        <div>
          <h4 className="text-white  mx-2 text-justify">{t('ONEWB_FEATURES')}</h4>
          <ul className="list-none list-outside">
            {registrationMessages.map((message, index) => (
              <li key={index} className="text-base text-white  text-justify m-3 relative">
                <span className="bullet"></span>
                {message}
              </li>
            ))}
          </ul>
        </div>
        <div>
          <div className="text-lg my-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 className="  max-w-[100px]" src="/img/others/blockchane.svg" alt="blockchane" />
            <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 items-center bg-nafithBlueColor-100 dark:bg-gray-800">
        <div className="max-w-7xl w-full px-4 sm:px-6 lg:px-8">
          <div className="">{content}</div>
          {children ? cloneElement(children, { ...rest }) : null}
        </div>
      </div>
    </div>
  );
};

export default SmallSide;
