import { useState, useEffect } from "react";
import { BottomNavBar } from "./BottomNavBar";
import { Sidebar } from "./Sidebar";
import { TopBar } from "./TopBar";
import { MiniPlayer } from "./MiniPlayer";

export function ResponsiveLayout({ children }: { children: React.ReactNode }) {
  const [isMobile, setIsMobile] = useState(false);

  // Check screen size on mount and resize
  useEffect(() => {
    const checkScreenSize = () => {
      setIsMobile(window.innerWidth < 768);
    };

    // Initial check
    checkScreenSize();

    // Add event listener
    window.addEventListener("resize", checkScreenSize);

    // Cleanup
    return () => window.removeEventListener("resize", checkScreenSize);
  }, []);

  return isMobile ? (
    <>
      <TopBar />
      <div
        style={{
          height: "calc(100vh - 110px)", // 50px TopBar + 60px BottomNavBar
          overflow: "auto",
          paddingTop: 50, // Account for TopBar height
        }}
      >
        {children}
      </div>
      <BottomNavBar />
      <MiniPlayer />
    </>
  ) : (
    <>
      <Sidebar>{children}</Sidebar>
      <MiniPlayer />
    </>
  );
}