import { BackToTop } from '@frontend/components/layout/BackToTop';
import { Footer } from '@frontend/components/layout/Footer';
import { Header } from '@frontend/components/layout/Header';
import { MouseCursor } from '@frontend/components/layout/MouseCursor';
import { OffcanvasSidebar } from '@frontend/components/layout/OffcanvasSidebar';
import { Preloader } from '@frontend/components/layout/Preloader';
import { HomeMarquee } from '@frontend/components/sections/HomeMarquee';
import { usePagePlugins } from '@frontend/hooks/use-page-plugins';
import { usePage } from '@inertiajs/react';
import { type ReactNode, useRef } from 'react';

type SiteShellProps = {
    children: ReactNode;
};

export function SiteShell({ children }: SiteShellProps) {
    const contentRef = useRef<HTMLDivElement>(null);
    const phrases = usePage<{ marquee?: string[] }>().props.marquee ?? [];

    usePagePlugins(contentRef);

    return (
        <div ref={contentRef} className="page-wrapper">
            <Preloader />
            <BackToTop />
            <MouseCursor />
            <OffcanvasSidebar />
            <Header />
            {children}
            <HomeMarquee phrases={phrases} />
            <Footer />
        </div>
    );
}