import { createContext, use, useState, type PropsWithChildren } from 'react';
import type { NavItem } from '../components/layout/types';

type LayoutProviderProps = PropsWithChildren<object>;
type LayoutContextType = {
  activeTab: NavItem;
  setActiveTab: (tab: NavItem) => void;
  isMobileMenuOpen: boolean;
  setIsMobileMenuOpen: (open: boolean) => void;
};

const LayoutContext = createContext<LayoutContextType | null>(null);

export const LayoutProvider: React.FC<LayoutProviderProps> = ({ children }) => {
  const [activeTab, setActiveTab] = useState<NavItem>('Dashboard');
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  return (
    <LayoutContext
      value={{
        activeTab,
        setActiveTab,
        isMobileMenuOpen,
        setIsMobileMenuOpen,
      }}
    >
      {children}
    </LayoutContext>
  );
};

export function useLayout() {
  const context = use(LayoutContext);
  if (!context) {
    throw new Error('useLayout must be used within a LayoutProvider');
  }
  return context;
}