import { create } from "zustand";
import { ReactNode } from "react";
import { devtools } from "zustand/middleware";

interface State {
  modal: ReactNode | null;
  setModal: (modal: ReactNode | null) => void;
  position: "center" | "right";
  setPosition: (position: "center" | "right") => void;
}

const useModalStore = create<State>()(
  devtools(
    (set) => ({
      modal: null,
      setModal: (modal) => {
        if (!modal) {
          set({ position: "center" });
        }

        set({ modal });
      },
      position: "center",
      setPosition: (position) => set({ position }),
    }),
    {
      name: "modal",
    }
  )
);

export default useModalStore;
