"use client";

import type { ReactNode } from "react";
import { usePathname } from "next/navigation";
import { useState } from "react";

import { Header } from "@/components/layout/header/header";
import {
    ContentSection,
    HeaderSection,
    MainContent,
    MobileSidebar,
    PageContainer,
    SidebarSection,
} from "@/components/layout/page-container";
import { Sidebar } from "@/components/layout/sidebar/sidebar";

export default function AppShell({ children }: { children: ReactNode }) {
    const pathname = usePathname();
    const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);

    const isAuthPage = pathname.startsWith("/auth");

    if (isAuthPage) {
        return <>{children}</>;
    }

    return (
        <PageContainer>
            <SidebarSection>
                <Sidebar />
            </SidebarSection>

            <ContentSection>
                <HeaderSection>
                    <Header onMenuClick={() => setMobileSidebarOpen(true)} />
                </HeaderSection>

                <MobileSidebar
                    open={mobileSidebarOpen}
                    onClose={() => setMobileSidebarOpen(false)}
                >
                    <Sidebar />
                </MobileSidebar>

                <MainContent>{children}</MainContent>
            </ContentSection>
        </PageContainer>
    );
}