import React, { Suspense } from "react";
import styles from "@/app/(Admin)/login/login.module.css";
import LoginForm from "@/components/administrator/LoginForm/login.form";
import SafeImage from "@/components/ui/SafeImage/safeImage";
import { description as defaultDescription } from "@/config/default";
import { getGeneralSettings } from "@/models/settings";

const Login = async () => {
  let description = await getGeneralSettings();

  if (!description) description = defaultDescription;

  return (
    <div className={styles.container}>
      <div className={styles.login_container}>
        <div className={styles.login_hero}>
          <div className={styles.login_image}>
            <SafeImage
              className={styles.image}
              width={500}
              height={500}
              src="/images/login_hero.jpg"
              alt="login"
              priority
            />
          </div>
        </div>
        <div className={styles.login_box}>
          <Suspense fallback={<div>Preparing</div>}>
            <LoginForm description={description} />
          </Suspense>
        </div>
      </div>
    </div>
  );
};

export default Login;
