import React, { createContext, useCallback, useContext, useState } from 'react';

interface SidebarLayoutContextType {
  mobileSidebarOpen: boolean;
  openMobileSidebar: () => void;
  closeMobileSidebar: () => void;
}

const SidebarLayoutContext = createContext<SidebarLayoutContextType | undefined>(undefined);

export const SidebarLayoutProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);

  const openMobileSidebar = useCallback(() => {
    setMobileSidebarOpen(true);
  }, []);

  const closeMobileSidebar = useCallback(() => {
    setMobileSidebarOpen(false);
  }, []);

  return (
    <SidebarLayoutContext.Provider
      value={{ mobileSidebarOpen, openMobileSidebar, closeMobileSidebar }}
    >
      {children}
    </SidebarLayoutContext.Provider>
  );
};

export const useSidebarLayout = () => {
  const context = useContext(SidebarLayoutContext);
  if (!context) {
    throw new Error('useSidebarLayout must be used within SidebarLayoutProvider');
  }
  return context;
};
