import { Outlet } from "react-router-dom";
import SettingsSidebar from "@/components/SettingsSidebar";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import { Menu } from "lucide-react";

export default function SettingsPage() {
  const [sheetOpen, setSheetOpen] = useState(false);

  return (
    <div className="flex h-full">
      {/* Desktop sidebar */}
      <aside className="hidden md:block w-72 border-r bg-card overflow-y-auto shrink-0">
        <SettingsSidebar />
      </aside>

      {/* Mobile sidebar */}
      <div className="md:hidden p-4">
        <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
          <SheetTrigger asChild>
            <Button variant="outline" size="icon">
              <Menu className="h-4 w-4" />
            </Button>
          </SheetTrigger>
          <SheetContent side="left" className="w-72 p-0">
            <SettingsSidebar onItemClick={() => setSheetOpen(false)} />
          </SheetContent>
        </Sheet>
      </div>

      {/* Content area */}
      <div className="flex-1 overflow-auto p-6">
        <Outlet />
      </div>
    </div>
  );
}
