"use client";

import { useState } from "react";
import Header from "@/layouts/hydrogen/header";
import Sidebar from "@/layouts/hydrogen/sidebar";
import { DrawerProvider } from "@/components/common/Drawer";

export default function HydrogenLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <main className="flex min-h-screen flex-grow">
      {/* ✅ Sidebar always visible in desktop */}
      <Sidebar
        collapsed={collapsed}
        setCollapsed={setCollapsed}
        className="fixed hidden xl:block"
      />

      {/* ✅ Content */}
      <div
        className={`flex flex-col w-full transition-all duration-300
        ${
          collapsed
            ? "xl:ms-[80px] xl:w-[calc(100%-80px)]"
            : "xl:ms-[255px] xl:w-[calc(100%-255px)]"
        }
        `}
      >
        <Header collapsed={collapsed} setCollapsed={setCollapsed} />

        <div className="flex flex-grow flex-col px-4 pb-6 pt-2">
          <DrawerProvider />  
          {children}
        </div>
      </div>
    </main>
  );
}