/*
 *  Toasts.tsx
 *  Zyquo Cloud Web
 *
 *  Author: Simon-Pierre Boucher
 *  Mail: contact@spboucher.ai
 *
 *  Toast stack: graceful human errors, success confirmations, and undo for
 *  soft deletes.
 */

import { useStore } from '../state/store'
import { IconX } from './icons'

export default function Toasts() {
  const toasts = useStore((s) => s.toasts)
  const dismissToast = useStore((s) => s.dismissToast)
  if (toasts.length === 0) return null
  return (
    <div className="toasts">
      {toasts.map((toast) => (
        <div key={toast.id} className={`toast ${toast.kind}`}>
          <span style={{ flex: 1 }}>{toast.text}</span>
          {toast.undo && (
            <button
              className="undo"
              onClick={() => {
                toast.undo?.()
                dismissToast(toast.id)
              }}
            >
              Undo
            </button>
          )}
          <button className="icon-button" onClick={() => dismissToast(toast.id)}>
            <IconX size={9} />
          </button>
        </div>
      ))}
    </div>
  )
}