import { Outlet } from "react-router-dom";
import { AppSidebar } from "../components/AppSidebar";
import { SidebarProvider, SidebarInset, SidebarTrigger } from "../components/ui/sidebar";
import { Separator } from "../components/ui/separator";

export function DashboardLayout() {
    return (
        <SidebarProvider>
            <div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none">
                <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/20 blur-[120px] rounded-full animate-pulse" />
                <div className="absolute bottom-[-10%] right-[-10%] w-[30%] h-[30%] bg-purple-500/10 blur-[100px] rounded-full" />
            </div>

            <AppSidebar />
            <SidebarInset className="bg-transparent">
                <header className="flex h-16 shrink-0 items-center gap-2 px-6 backdrop-blur-md bg-background/30 border-b border-white/5 sticky top-0 z-10">
                    <SidebarTrigger className="-ml-1 hover:bg-white/5 transition-colors" />
                    <Separator orientation="vertical" className="mx-4 h-4 bg-white/10" />
                    <div className="flex items-center gap-2">
                        <h1 className="text-lg font-semibold tracking-tight text-glow">Dashboard</h1>
                    </div>
                    <div className="ml-auto flex items-center gap-4">
                        <div className="h-2 w-2 rounded-full bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.5)]" />
                    </div>
                </header>
                <main className="flex flex-1 flex-col gap-6 p-6">
                    <div className="flex-1 rounded-2xl md:min-h-min">
                        <Outlet />
                    </div>
                </main>
            </SidebarInset>
        </SidebarProvider>
    );
}