/**
 * Button primitive — variants: primary, secondary, danger, ghost
 * Sizes: sm, md (default), lg
 */
const { html } = window;
const { useState } = hooks;

export function Button({ variant = 'primary', size = 'md', disabled, loading, onClick, children, type = 'button', className = '' }) {
    const cls = `sw-btn sw-btn--${variant} sw-btn--${size} ${loading ? 'sw-btn--loading' : ''} ${className}`.trim();

    return html`
        <button
            type=${type}
            class=${cls}
            disabled=${disabled || loading}
            onClick=${onClick}
        >
            ${loading && html`<span class="sw-btn__spinner" />`}
            <span class=${loading ? 'sw-btn__content--hidden' : ''}>${children}</span>
        </button>
    `;
}
