"use client";

import { AuthGuard, LoginGuard } from "@/contexts";
import { usePathname } from "next/navigation";
import type { PropsWithChildren } from "react";
import { Header } from "./header";
import Notification from "./notification";
import { Sidebar } from "./sidebar";
export function ConditionalLayout({ children }: PropsWithChildren) {
  const pathname = usePathname();
  const isAuthPage = pathname.startsWith("/auth");

  return (
    <>
      {isAuthPage ? (
        <LoginGuard>
          <main>{children}</main>
        </LoginGuard>
      ) : (
        <AuthGuard>
          <Notification>
            <div className="flex min-h-screen">
              <Sidebar />
              <div className="w-full bg-gray-2 dark:bg-[#020d1a]">
                <Header />
                <main className="isolate mx-auto w-full max-w-screen-2xl overflow-hidden p-4 md:p-6 2xl:p-10">
                  {children}
                </main>
              </div>
            </div>
          </Notification>
        </AuthGuard>
      )}
    </>
  );
}