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

const Cover = ({ children, content, ...rest }) => {
  const [isDark] = useDarkMode();
  return (
    <div className="grid lg:grid-cols-3 h-full">
      <div
        className="col-span-2 bg-no-repeat bg-cover py-6 px-16 flex-col justify-between bg-white dark:bg-gray-800 hidden lg:flex"
        style={
          !isDark
            ? {
                backgroundImage: `url('/img/others/auth-cover-bg.jpg')`,
              }
            : null
        }
      >
        <Logo mode="dark" />
        <div>
          <h3 className="text-white mb-4">Jump start your project with Elstar</h3>
          <p className="text-lg text-white opacity-80 max-w-[700px]">
            Elstar comes with a complete set of UI components crafted with Tailwind CSS, it fulfilled most of the use
            case to create modern and beautiful UI and application
          </p>
        </div>
        <span className="text-white">
          {t('Copyright')} &copy; {`${new Date().getFullYear()}`} <span className="font-semibold">{`${APP_NAME}`}</span>{' '}
        </span>
      </div>
      <div className="flex flex-col justify-center items-center bg-white dark:bg-gray-800">
        <div className="xl:min-w-[450px] px-8">
          <div className="mb-8">{content}</div>
          {children ? cloneElement(children, { ...rest }) : null}
        </div>
      </div>
    </div>
  );
};

export default Cover;
