/**
 * Hoover — components/toast.js
 *
 * ToastContainer component that renders queued toast notifications.
 * Uses the toast/dismissToast state from api.js.
 */

import { h } from '../vdom.js?v=7';
import { _toasts, dismissToast } from '../api.js?v=7';

/**
 * Render all pending toast notifications.
 *
 * @returns {VNode}
 */
export function ToastContainer() {
    if (!_toasts.length) return h('#text', '');

    const clsMap = {
        info: 'toast-info',
        success: 'toast-success',
        error: 'toast-error',
        warning: 'toast-warning',
    };

    return h('div', { class: 'toast-container' },
        ..._toasts.map(t =>
            h('div', {
                class: `toast ${clsMap[t.type] || clsMap.info}`,
                'on:click': () => dismissToast(t.id),
            },
                h('span', null, t.message),
                h('button', {
                    class: 'toast-close',
                    'on:click': (e) => { e.stopPropagation(); dismissToast(t.id); },
                }, '\u00d7'),
            ),
        ),
    );
}