import Header from "./Header";
import { Suspense, useEffect, useRef, useState } from "react";
import SuspenseContent from "./SuspenseContent";
import { useSelector } from 'react-redux';
import { usePage } from "@inertiajs/react";

function PageContent({ children }) {
    const mainContentRef = useRef(null);
    const { pageTitle } = useSelector(state => state.header);
    const { url } = usePage(); // Ambil URL dari Inertia
    const [isLoginPage, setIsLoginPage] = useState(false);

    useEffect(() => {
        mainContentRef.current?.scroll({
            top: 0,
            behavior: "smooth"
        });
    }, [pageTitle]);

    // Update state saat route berubah
    useEffect(() => {
        setIsLoginPage(url === "/login");
    }, [url]);

    return (
        <div className="drawer-content flex flex-col">
            {!isLoginPage && <Header />}
            <main className="flex-1 overflow-y-auto md:pt-4 pt-4 px-6 bg-base-200" ref={mainContentRef}>
                <Suspense fallback={<SuspenseContent />}>
                    <div className="min-h-screen">
                        {children}
                    </div>
                </Suspense>
            </main>
        </div>
    );
}

export default PageContent;

