import React, { lazy, useContext } from "react";
import { Link } from "react-router-dom";
import { localImgLoad } from "../../lib";

import DarkModeContext from "../Contexts/DarkModeContext";

export default function LoginLayout({ slogan, children }) {
  const bgImg = localImgLoad('images/left-wrenchboard.jpg')
  const bgImgNig = localImgLoad('images/wrench-home-back-nigeria.jpg')
  const bgImgCom = localImgLoad('images/wrench-home-back-common.jpg')

  const {countryMode} = useContext(DarkModeContext);

  return (
    <div className={`h-screen overflow-y-auto bg-cover bg-center`}
    style={{backgroundImage: `url(${ countryMode == 'NG' ? bgImgNig : bgImgCom})`}}
    >
      <div className={`w-full grid grid-cols-1 lg:grid-cols-2`}>
        {/* <div 
            className={`auth-bg hidden lg:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
            style={{backgroundImage: `url(${bgImg})`}}
        >
        </div> */}
        <div className="p-5 sm:p-7 flex place-content-center lg:col-start-2">
          <div className="py-5 w-full sm:w-11/12 max-w-2xl shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
            <div className="w-full flex justify-center items-center">
              {children && children}
            </div>
            <div className="w-full flex flex-col justify-center items-center px-10">
              <div className="w-full flex justify-center items-center pt-5">
                <div className="flex items-center">
                <a
                      href="https://www.wrenchboard.com/about-us"
                      className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
                      target="_blank"
                      rel="noreferrer"
                    >
                      About
                    </a>
                    <a
                      href="https://www.wrenchboard.com/service"
                      className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
                      target="_blank"
                      rel="noreferrer"
                    >
                      Services
                    </a>
                    <a
                      href="https://www.wrenchboard.com/contact"
                      className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
                      target="_blank"
                      rel="noreferrer"
                    >
                      Contact Us
                    </a>
                </div>
              </div>
              <p className="py-1 text-black text-[15px] px-2 font-medium flex items-center gap-1">
                <span className="dark:text-white">&copy; {new Date().getFullYear()} -</span>
                <Link to="/" className="text-[#009ef7] ml-1">
                  WrenchBoard
                </Link>{" "}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}