import { useEffect } from "react";
import { Outlet, Link } from "react-router-dom";
import { toAbsoluteUrl } from "../../../_digifi/helpers";

const AuthLayout = () => {
  useEffect(() => {
    const root = document.getElementById("root");
    if (root) {
      root.style.height = "100%";
    }
    return () => {
      if (root) {
        root.style.height = "auto";
      }
    };
  }, []);

  return (
    <div className="d-flex flex-column flex-lg-row flex-column-fluid" 
      style={{backgroundImage: 'url(../../../../public/media/auth/digifi_bko_home.jpg)', backgroundRepeat: 'none', backgroundSize: 'cover'}}
    >
      {/* begin::Body */}
      <div className="h-100 flex flex-column align-items-center w-lg-50 p-10">
        {/* begin::Form */}
        <div 
          // className="d-flex flex-center flex-column flex-lg-row-fluid"
          className="d-flex h-100 align-items-center"
        >
          {/* begin::Wrapper */}
          <div className="w-lg-500px p-10 bg-white shadow-sm rounded">
            {/* begin::Title */}
            <h1 className="text-black fs-2qx fw-bolder text-center mb-7">
                {/* begin::Logo */}
                <Link to="/" className="mb-12">
                  <img
                    alt="Logo"
                    src={toAbsoluteUrl("media/logos/custom-1.png")}
                    className="h-75px"
                  />
                </Link>
                {/* end::Logo */} 
                BackOffice
            </h1>
            {/* end::Title */}
            <Outlet />
          </div>
          {/* end::Wrapper */}
        </div>
        {/* end::Form */}
      </div>
      {/* end::Body */}
    </div>
  );
};

export { AuthLayout };