"use client"
import * as React from "react"
import { cn } from "@/lib/utils"

interface Toast {
  id: string
  message: string
  type?: 'success' | 'error' | 'info'
}

const ToastContext = React.createContext<{
  toast: (message: string, type?: Toast['type']) => void
}>({ toast: () => {} })

export function useToast() {
  return React.useContext(ToastContext)
}

export function ToastProvider({ children }: { children: React.ReactNode }) {
  const [toasts, setToasts] = React.useState<Toast[]>([])

  const toast = React.useCallback((message: string, type: Toast['type'] = 'info') => {
    const id = Math.random().toString(36).slice(2)
    setToasts((prev) => [...prev, { id, message, type }])
    setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 4000)
  }, [])

  return (
    <ToastContext.Provider value={{ toast }}>
      {children}
      <div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2">
        {toasts.map((t) => (
          <div
            key={t.id}
            className={cn(
              "rounded-xl px-4 py-3 text-sm font-medium text-white shadow-lg animate-in slide-in-from-right",
              t.type === 'success' && 'bg-success-green',
              t.type === 'error' && 'bg-danger-red',
              t.type === 'info' && 'bg-trust-blue',
              !t.type && 'bg-trust-blue'
            )}
          >
            {t.message}
          </div>
        ))}
      </div>
    </ToastContext.Provider>
  )
}
