import { useDock, MusicPlayerHost } from 'officerdev';
import { Background } from './Background';
import { Header } from './Header';
import { Dock, ALL_DOCK_ITEMS, DEFAULT_DOCK_PATHS } from './Dock';
import { useIsTouch } from './useIsTouch';
import { usePageTitleSync } from '@/state/usePageTitle';

type DashboardLayoutProps = {
  children?: React.ReactNode;
};
export function DashboardLayout({ children }: DashboardLayoutProps) {
  const { items: visibleItems } = useDock(ALL_DOCK_ITEMS, DEFAULT_DOCK_PATHS);
  const isTouch = useIsTouch();
  usePageTitleSync();

  return (
    <div className="relative overflow-hidden h-dvh outline-none inset-0">
      <Header dockItems={visibleItems} />
      <section className="relative h-dvh snap-start overflow-hidden">
        <Background />
        {!isTouch && <Dock items={visibleItems} className="hidden md:flex" />}
        <div className="absolute inset-0 z-2 pt-[52px] md:pt-[64px] pb-2 overflow-y-auto">
          {children}
        </div>
      </section>
      <MusicPlayerHost />
    </div>
  );
};


