"use client";
import React, { createContext, useContext, useState } from "react";

type Toast = { id: string; message: string };
type Ctx = { show: (message: string) => void };

const ToastCtx = createContext<Ctx>({ show: () => {} });

export function useToast() {
  return useContext(ToastCtx);
}

export function ToastProvider({ children }: { children: React.ReactNode }) {
  const [toasts, setToasts] = useState<Toast[]>([]);
  const show = (message: string) => {
    const t = { id: String(Date.now()), message };
    setToasts((x) => [t, ...x]);
    setTimeout(() => setToasts((x) => x.filter((i) => i.id !== t.id)), 3000);
  };
  return (
    <ToastCtx.Provider value={{ show }}>
      {children}
      <div style={{ position: "fixed", bottom: 16, right: 16, display: "flex", flexDirection: "column", gap: 8 }}>
        {toasts.map((t) => (
          <div key={t.id} style={{ background: "#111", color: "#fff", padding: "8px 12px", borderRadius: 6 }}>
            {t.message}
          </div>
        ))}
      </div>
    </ToastCtx.Provider>
  );
}


