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

interface MagicBagContextType {
  hasNewItem: boolean;
  setHasNewItem: (value: boolean) => void;
  addNewItem: () => void;
  clearBadge: () => void;
}

const MagicBagContext = createContext<MagicBagContextType | undefined>(undefined);

export function MagicBagProvider({ children }: { children: ReactNode }) {
  const [hasNewItem, setHasNewItem] = useState(false);

  const addNewItem = () => {
    setHasNewItem(true);
  };

  const clearBadge = () => {
    setHasNewItem(false);
  };

  return (
    <MagicBagContext.Provider value={{ hasNewItem, setHasNewItem, addNewItem, clearBadge }}>
      {children}
    </MagicBagContext.Provider>
  );
}

export function useMagicBag() {
  const context = useContext(MagicBagContext);
  if (!context) {
    throw new Error("useMagicBag must be used within MagicBagProvider");
  }
  return context;
}
