/**
 * Banner primitive — persistent top/bottom bar
 * Variants: info, warn, error, success
 */
const { html } = window;
const { useState } = hooks;

export function Banner({ text, variant = 'info', dismissible = false, position = 'top', onDismiss }) {
    const [dismissed, setDismissed] = useState(false);

    if (dismissed || !text) return null;

    const handleDismiss = () => {
        setDismissed(true);
        if (onDismiss) onDismiss();
    };

    return html`
        <div class="sw-banner sw-banner--${variant} sw-banner--${position}" role="status">
            <span class="sw-banner__text">${text}</span>
            ${dismissible && html`
                <button class="sw-banner__close" onClick=${handleDismiss} aria-label="Dismiss">\u00d7</button>
            `}
        </div>
    `;
}
