import type { Metadata } from "next";
import type { ReactNode } from "react";

import "@/styles/medora-theme.css";
import { DsSidebar } from "@/components/design-system/ds-sidebar";
import { DsTopbar } from "@/components/design-system/ds-topbar";
import { MedoraScope } from "@/components/design-system/medora-scope";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
import { Toaster } from "@/components/ui/toast";
import { TooltipProvider } from "@/components/ui/tooltip";

export const metadata: Metadata = {
  title: "Medora Design System",
  description: "shadcn/ui components themed with Medora tokens, populated with mock pharmacy data.",
};

export default function DesignSystemLayout({ children }: { children: ReactNode }) {
  return (
    <div className="medora min-h-svh">
      <MedoraScope />
      <TooltipProvider>
        <Toaster>
          <SidebarProvider>
            <DsSidebar />
            <SidebarInset className="min-w-0 bg-background">
              <DsTopbar />
              <main className="mx-auto w-full max-w-6xl flex-1 px-6 py-8">{children}</main>
            </SidebarInset>
          </SidebarProvider>
        </Toaster>
      </TooltipProvider>
    </div>
  );
}