"use client";

import { useState } from "react";
import Sidebar, { MobileDrawer, MobileMenuButton } from "@/components/layout/Sidebar";
import Topbar from "@/components/layout/Topbar";
import SecondaryNav from "@/components/layout/SecondaryNav";
import Breadcrumb from "@/components/layout/Breadcrumb";
import CategoryHeader from "@/components/layout/CategoryHeader";

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [drawerOpen, setDrawerOpen] = useState(false);

  return (
    <div className="min-h-screen bg-white flex flex-col">
      {/* Topbar */}
      <div className="relative">
        <div className="lg:hidden absolute left-4 top-1/2 -translate-y-1/2 z-10">
          <MobileMenuButton onClick={() => setDrawerOpen(true)} />
        </div>
        <div className="space-y-6 sm:space-y-8">
          <div className="mb-2 sm:mb-3">
            <Topbar />
          </div>
          <SecondaryNav />
          <CategoryHeader />
        </div>
      </div>

      {/* Mobile drawer */}
      <MobileDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} />

      {/* Body */}
      <div className="flex flex-1 flex-col gap-4 sm:gap-6 sm:p-6">
        <div className="sm:-mx-6">
          <Breadcrumb items={[
            { label: "Home", href: "/" },
            { label: "My Profile", href: "/dashboard" },
            { label: "My Orders" },
          ]} />
        </div>

        <div className="flex flex-1 gap-4 px-4 sm:gap-6 sm:px-0">
          <Sidebar />
          <main className="flex-1 min-w-0">{children}</main>
        </div>
      </div>
    </div>
  );
}
