"use client"

import { useSession } from "next-auth/react"
import { useRouter } from "next/navigation"
import { useEffect } from "react"
import { RoleType } from "@/types/auth"

interface RoleGuardProps {
    children: React.ReactNode
    allowedRoles: RoleType[]
}

export function RoleGuard({ children, allowedRoles }: RoleGuardProps) {
    const { data: session, status } = useSession()
    const router = useRouter()

    useEffect(() => {
        if (status === "loading") return

        if (!session) {
            router.push("/admin/login")
            return
        }

        const userRole = (session.user as any).role as RoleType

        if (!allowedRoles.includes(userRole)) {
            router.push("/unauthorized")
        }
    }, [session, status, router, allowedRoles])

    if (status === "loading") {
        return <div>Loading...</div>
    }

    if (!session) {
        return null
    }

    const userRole = (session.user as any).role as RoleType
    if (!allowedRoles.includes(userRole)) {
        return null
    }

    return <>{children}</>
}