import { useState } from 'react';
import { LeftSidebar } from '@/components/LeftSidebar';
import { RightSidebar } from '@/components/RightSidebar';
import { MobileTopBar } from '@/components/MobileTopBar';
import { MobileBottomNav } from '@/components/MobileBottomNav';
import { MobileDrawer } from '@/components/MobileDrawer';
import { FloatingComposeButton } from '@/components/FloatingComposeButton';

interface MainLayoutProps {
  children: React.ReactNode;
  /** Optional custom right sidebar to replace the default one */
  rightSidebar?: React.ReactNode;
}

export function MainLayout({ children, rightSidebar }: MainLayoutProps) {
  const [drawerOpen, setDrawerOpen] = useState(false);

  return (
    <>
      {/* Mobile top bar - only on small screens */}
      <MobileTopBar onAvatarClick={() => setDrawerOpen(true)} />

      {/* Mobile drawer */}
      <MobileDrawer open={drawerOpen} onOpenChange={setDrawerOpen} />

      {/* Main layout - three column on desktop */}
      <div className="flex justify-center min-h-screen mx-auto max-w-[1200px]">
        {/* Desktop left sidebar - hidden below sidebar breakpoint */}
        <div className="hidden sidebar:block">
          <LeftSidebar />
        </div>

        {/* Main content area */}
        {children}

        {/* Desktop right sidebar - handled internally with hidden lg:block */}
        {rightSidebar ?? <RightSidebar />}
      </div>

      {/* Mobile bottom nav - only on small screens */}
      <MobileBottomNav />

      {/* Mobile floating compose button */}
      <FloatingComposeButton />

      {/* Bottom padding spacer for mobile bottom nav */}
      <div className="h-16 sidebar:hidden" />
    </>
  );
}