'use client';

import { Sidebar } from './sidebar';
import { UserMenu } from './user-menu';
import { NotificationBell } from '@/components/notifications/notification-bell';
import { FamilyOverlayProvider } from '@/components/family/family-overlay-provider';
import { MiniFamilyChat } from '@/components/family/mini-family-chat';

export function IdShell({ active, children, wide = false }: { active: string; children: React.ReactNode; wide?: boolean }) {
  return (
    <FamilyOverlayProvider>
      <div className="min-h-screen bg-white">
        <Sidebar active={active} />
        <div className="fixed right-4 top-4 z-40 flex items-center gap-2 lg:right-8 lg:top-6">
          <NotificationBell />
          <UserMenu />
        </div>
        <main className="px-5 py-8 lg:pl-[220px] lg:pr-8">
          <div className={wide ? 'mx-auto max-w-[920px]' : 'mx-auto max-w-[560px]'}>{children}</div>
        </main>
        <MiniFamilyChat />
      </div>
    </FamilyOverlayProvider>
  );
}