import { create } from "zustand";

export type ToastType = "success" | "error" | "info";

export type ToastItem = {
  id: number;
  message: string;
  type: ToastType;
};

type UiState = {
  locale: "en" | "id";
  toasts: ToastItem[];
};

type UiAction = {
  setLocale: (locale: "en" | "id") => void;
  addToast: (message: string, type?: ToastType) => void;
  removeToast: (id: number) => void;
  clearToasts: () => void;
};

let toastCounter = 1;

export const useApiStore = create<UiState & UiAction>((set) => ({
  locale: "en",
  toasts: [],
  setLocale: (locale) => set({ locale }),
  addToast: (message, type = "info") =>
    set((state) => ({
      toasts: [...state.toasts, { id: toastCounter++, message, type }]
    })),
  removeToast: (id) => set((state) => ({ toasts: state.toasts.filter((toast) => toast.id !== id) })),
  clearToasts: () => set({ toasts: [] })
}));

export const useLocaleStore = <T>(selector: (s: UiState & UiAction) => T): T =>
  useApiStore(selector);