import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import {
  ClerkProvider,
  SignedIn,
  SignedOut,
  SignInButton,
  UserButton,
} from "@clerk/nextjs";
import { Sidebar } from "@/components/ui/Sidebar";
import { Toaster } from "sonner";
import { QueryProvider } from "@/components/providers/QueryProvider";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "FitAI Admin",
  description: "Fitness management admin dashboard",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ClerkProvider>
      <QueryProvider>
        <html lang="en">
          <body className={inter.className}>
            <div className="flex min-h-screen bg-background">
              <Sidebar />
              <main className="flex-1 p-6 lg:p-8 min-h-screen">
                <div className="max-w-7xl mx-auto space-y-8">{children}</div>
              </main>
            </div>
            <Toaster richColors position="top-right" />
          </body>
        </html>
      </QueryProvider>
    </ClerkProvider>
  );
}
