"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { isLoggedIn } from "@/utils/auth";
import { useGeneralSettings } from "@/lib/GeneralSettingsContext";
import { AuthBrandPanel } from "@/components/auth/AuthBrandPanel";

export default function AuthLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const { settings } = useGeneralSettings();

  useEffect(() => {
    if (isLoggedIn()) {
      router.replace("/");
    }
  }, [router]);

  return (
    <div
      className="min-h-dvh grid lg:grid-cols-2"
      style={{
        background: settings?.loginBgImg
          ? `url(${settings.loginBgImg}) center/cover no-repeat`
          : "var(--bg)",
      }}
    >
      <AuthBrandPanel />
      <div className="flex items-center justify-center p-6 min-h-dvh">
        <div className="w-full max-w-md">
          {children}
        </div>
      </div>
    </div>
  );
}