'use client'
import DashboardSidebar from "@/components/layout/dashboard/sidebar";
import { RootState } from "@/store/store";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
import { useSelector } from "react-redux";
import Sidebar from "@/components/layout/dashboard/sidebar";
import { adminMenuItems, creatorMenuItems, fanMenuItems } from "@/utils/menu-items";


export default function Layout({ children, siteadmin, sitefan, sitecreator }: { children: React.ReactNode, siteadmin: React.ReactNode, sitefan: React.ReactNode, sitecreator: React.ReactNode }) {
    const user = useSelector((state: RootState) => (state.auth.user))
    const router = useRouter();
    const token = localStorage.getItem('token')
    useEffect(() => {
        if (!token || !['creator', 'admin', 'fan'].includes(user?.role?.name)) {
            router.push("/sign-in");
        }
    }, [user])
    console.log("Logged In User Role:", user?.role?.name)
    return (
        <main className="min-h-screen relative flex md:space-x-5">
            <Sidebar menu={user?.role?.name == 'admin' ? adminMenuItems : user?.role?.name == 'creator' ? creatorMenuItems : fanMenuItems} />
            {user?.role?.name == 'admin' && siteadmin}
            {user?.role?.name == 'creator' && sitecreator}
            {user?.role?.name == 'fan' && sitefan}
        </main>
    )
}