Toast

"use client"

import * as React from "react"
import { CheckCircle2, Info, X } from "lucide-react"
import "@/components/designos/designos.css"

export type ToastMessage = { id: string; title: string; description?: string; tone?: "info" | "success" }

export function ToastRegion({ toasts, onDismiss }: { toasts: ToastMessage[]; onDismiss: (id: string) => void }) {
  React.useEffect(() => { const timers = toasts.map((toast) => window.setTimeout(() => onDismiss(toast.id), 5000)); return () => timers.forEach(window.clearTimeout) }, [toasts, onDismiss])
  return <div className="dos-toast-region" role="region" aria-label="Notifications" aria-live="polite">{toasts.map((toast) => { const Icon = toast.tone === "success" ? CheckCircle2 : Info; return <div key={toast.id} className="dos-toast"><Icon aria-hidden="true" /><strong>{toast.title}</strong><button type="button" className="dos-icon-button dos-button--ghost" style={{ width: 28, height: 28 }} onClick={() => onDismiss(toast.id)} aria-label={`Dismiss ${toast.title}`}><X aria-hidden="true" /></button>{toast.description && <span className="dos-toast__description">{toast.description}</span>}</div> })}</div>
}