"user client"

import { sideNavItems } from '@/lib/dashboard';
import { headers } from "next/headers";
import Script from 'next/script';

import AccountDropdown from '../../components/AccountDropdown';
import SideNav from "@/components/SideNav";
import Image from 'next/image';
import classnames from 'classnames';


export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
    const headersList = await headers();
    const pathname = headersList.get("x-current-path");
    const dashboardType = pathname?.split('/').pop() || "";
    const pageNavItems = sideNavItems[dashboardType];

  return (
   <div className="relative w-full h-full">
        <Script src={`https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_PLACES_API_KEY}&libraries=places`} strategy="beforeInteractive" />
        <div className="absolute bottom-0 right-0 flex flex-col justify-end items-end w-full h-full">
            <div className="w-full -mb-[2px] flex justify-start">
                <div className="w-[87vw] sm:w-[91vw] md:w-[93vw] lg:w-[94.5vw] xl:w-[95.5vw] h-20 border-b-2 border-copper z-2" />
            </div>
            <div className="w-[60px] h-full flex justify-start">
                <div className="w-[32.5px] flex flex-col">
                    <div className={classnames(
                        "relative h-full border-r-6 rounded-out-tl-4xl rounded-tr-4xl bg-copper border-atmosphere"
                    )} />
                </div>
            </div>
        </div>
        <div className="w-full h-full flex items-start">
            <SideNav
                maxWidth="w-[16vw]"
                bgColor="bg-atmosphere"
                navItems={pageNavItems}
            />
            <div className="w-full min-w-[87vw] max-w-[94vw] lg:min-w-[89vw] lg:max-w-[95vw] flex flex-col items-end">
                <div className="w-[90.15vw] h-20 flex justify-between items-center">
                    <div className={classnames('flex items-center')}>
                        <div className="-ml-8.5 z-2">
                            <Image
                                src="/images/bbstpa-forsite.png"
                                alt="Britton Logo"
                                width={205}
                                height={60}
                            />
                        </div>
                    </div>
                    <div className="pr-20 z-2">
                        <AccountDropdown userRole="member" />
                    </div>
                </div>
                <div className="w-full h-full flex justify-start">
                    {children}
                </div>
            </div>
        </div>
    </div>
  )
}