"use client"

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

type ActivePanel = "menu" | "chat" | null

interface MobilePanelContextType {
	activePanel: ActivePanel
	setActivePanel: (panel: ActivePanel) => void
}

const MobilePanelContext = createContext<MobilePanelContextType | undefined>(
	undefined,
)

export function MobilePanelProvider({ children }: { children: ReactNode }) {
	const [activePanel, setActivePanel] = useState<ActivePanel>(null)

	return (
		<MobilePanelContext.Provider value={{ activePanel, setActivePanel }}>
			{children}
		</MobilePanelContext.Provider>
	)
}

export function useMobilePanel() {
	const context = useContext(MobilePanelContext)
	if (!context) {
		throw new Error("useMobilePanel must be used within a MobilePanelProvider")
	}
	return context
}