/**
 * @fileoverview Loading Spinner Component for Rantii
 * @author retoor <retoor@molodetz.nl>
 * @description Animated loading indicator for async operations
 * @keywords loading, spinner, animation, progress, indicator
 */

import { BaseComponent } from './base-component.js';

class LoadingSpinner extends BaseComponent {
    static get observedAttributes() {
        return ['size', 'text'];
    }

    init() {
        this.render();
    }

    render() {
        const size = this.getAttr('size') || 'medium';
        const text = this.getAttr('text') || '';

        this.addClass('spinner', `spinner-${size}`);

        this.setHtml(`
            <div class="spinner-circle">
                <div class="spinner-inner"></div>
            </div>
            ${text ? `<span class="spinner-text">${text}</span>` : ''}
        `);
    }

    onAttributeChanged(name, oldValue, newValue) {
        this.render();
    }

    setText(text) {
        this.setAttr('text', text);
    }

    setSize(size) {
        this.setAttr('size', size);
    }
}

customElements.define('loading-spinner', LoadingSpinner);

export { LoadingSpinner };