import { AppContent } from '@/components/layout/app-content';
import { AppShell } from '@/components/layout/app-shell';
import CategoryNav from '@/components/layout/category-nav';
import { DefaultHeader } from '@/components/layout/header/default-header';
import { DashboardFooterSectionProps } from '@/components/page-builder/sections/dashboard-footer-section';
import DashboardFooter from '@/components/user/dashboard/dashboard-footer';
import { useApiSWR } from '@/hooks/useSWR';
import { type PropsWithChildren } from 'react';

export default function DefaultLayout({ children }: PropsWithChildren) {
  const { data: footerProps } = useApiSWR<DashboardFooterSectionProps>(
    '/builder/homepage-footer',
  );

  return (
    <AppShell variant="sidebar">
      <AppContent
        variant="sidebar"
        className="relative z-10 flex h-svh flex-col overflow-hidden bg-background-layer"
      >
        <DefaultHeader />
        <CategoryNav />
        <div className="flex-1 overflow-y-auto">
          <div>
            <div className="pm-surface container p-4">{children}</div>
            <DashboardFooter {...footerProps} />
          </div>
        </div>
      </AppContent>
    </AppShell>
  );
}