import { createContext, type ReactNode, useContext, useState } from "react"

type LayoutState = {
  navbar: boolean
  setNavbar: (navbar: boolean) => void
  toggleNavbar: () => void
}

const LayoutContext = createContext<LayoutState | null>(null)

export function LayoutProvider(props: { children: ReactNode }) {
  const [navbar, setNavbar] = useState(false)

  const toggleNavbar = () => setNavbar(!navbar)

  return (
    <LayoutContext value={{ navbar, setNavbar, toggleNavbar }}>
      {props.children}
    </LayoutContext>
  )
}

export function useLayout() {
  const ctx = useContext(LayoutContext)
  if (!ctx) throw new Error("useLayout must be used within LayoutProvider")
  return ctx
}
