import { useAtomValue } from "jotai";
import { SidebarNav, BottomNav, SidebarToggle } from "./nav";
import { sidebarAtom } from "./sidebarAtom";
import { cn } from "@/lib/utils";

interface LayoutProps {
    children?: React.ReactNode;
}

export default function Layout({ children }: LayoutProps) {
    const sidebarState = useAtomValue(sidebarAtom);
    const isSidebarOpen = !sidebarState.isCollapsed;
    
    return (
        <div className="flex flex-col md:flex-row relative">
            {/* Desktop Sidebar - 데스크탑에서만 보이는 사이드바 */}
            <aside className={cn("hidden md:flex md:flex-col",
                "transition-all duration-300 ease-in-out",
                "border-r bg-background sticky top-0 h-screen",
                isSidebarOpen ? 'w-64' : 'w-16')}>
                <div className="flex items-center justify-between p-2 border-b">
                    {isSidebarOpen && (
                        <h2 className="text-lg font-semibold ml-4">Ionian</h2>
                    )}
                    <SidebarToggle className="size-10 p-2 ml-1" />
                </div>
                <div className="flex-1 overflow-y-auto">
                    <SidebarNav />
                </div>
            </aside>

            {/* Main Content */}
            <main className="flex-1 flex flex-col min-h-0 p-0 md:pb-0 pb-14">
                {children}
            </main>

            {/* Mobile Bottom Navigation - 모바일에서만 보이는 하단 네비게이션 */}
            <div className="md:hidden fixed bottom-0 left-0 right-0 z-30">
                <BottomNav />
            </div>
        </div>
    );
}