'use client'

// React Imports
import { createContext, useCallback, useMemo, useState } from 'react'

// Type Imports
import type { ChildrenType } from '@core/types'
import type { ReactNode } from 'react'

export type NavbarSlotContextProps = {
  slotContent: ReactNode
  setSlotContent: (content: ReactNode) => void
}

const NavbarSlotContext = createContext({} as NavbarSlotContextProps)

export const NavbarSlotProvider = ({ children }: ChildrenType) => {
  const [slotContent, setSlotContentState] = useState<ReactNode>(null)

  const setSlotContent = useCallback((content: ReactNode) => {
    setSlotContentState(content)
  }, [])

  const value = useMemo(
    () => ({
      slotContent,
      setSlotContent
    }),
    [slotContent, setSlotContent]
  )

  return <NavbarSlotContext.Provider value={value}>{children}</NavbarSlotContext.Provider>
}

export default NavbarSlotContext
