import type {Metadata} from "next";
import "../globals.css";
import ProfileDropdown from "@/components/ProfileDropdown";
import {Button} from "@/components/ui/button";
import {Bell} from "lucide-react";
import SideMenu from "@/components/SideMenu";
import PanelQueryProvider from "@/components/PanelQueryProvider";
import AuthGuard from "@/components/AuthGuard";
import { Suspense } from "react";
import Loader from "@/components/Loader";
import { Badge } from "@/components/ui/badge";
export const metadata: Metadata = {
  title: "پنل مدیریت سایت ipd",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <div className="flex items-start w-full text-[#313131]">
      <PanelQueryProvider>
        <AuthGuard>
          <SideMenu />
          <section className="w-full">
            <div className="h-[60px] z-30 shadow-sm w-full pr-[var(--panel-width-padding)] flex items-center justify-between gap-x-5 bg-white pl-10">
              <div className="flex items-center justify-start gap-x-4">
                <Suspense fallback={<Loader />}>
                  <ProfileDropdown />
                </Suspense>
                <Button variant="ghost">
                  <Bell />
                </Button>
                <Badge variant={"secondary"} className="font-light text-base">
                  {new Date().toLocaleDateString("fa-IR")}
                </Badge>
              </div>
              <h4 className="font-medium">
                پنل مدیریت بیماران بین الملل بیمارستان شمال
              </h4>
            </div>

            <div className="pl-10 py-10 pr-[var(--panel-width-padding))]">
              {children}
            </div>
          </section>
        </AuthGuard>
      </PanelQueryProvider>
    </div>
  );
}
