/**
 * EasyCard Component
 * <easy-card title="Card Title">
 *     <p>Put any content here: text, images, lists, etc.</p>
 * </easy-card>
 */

class EasyCard extends HTMLElement {
    constructor() {
        super();

        const shadow = this.attachShadow({mode: 'open'});

        // Create card container
        this.card = document.createElement('div');
        this.card.classList.add('easy-card');

        // Create content container
        this.content = document.createElement('div');
        this.content.classList.add('easy-card-content');

        // Styles
        const style = document.createElement('style');
        style.textContent = `
            .easy-card {
                background: #fff;
                border-radius: 8px;
                padding: 16px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
                font-family: Arial, sans-serif;
                max-width: 400px;
                margin: 8px 0;
                transition: transform 0.2s, box-shadow 0.2s;
            }
            .easy-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 18px rgba(0,0,0,0.15);
            }
            .easy-card-title {
                margin: 0 0 8px 0;
                font-size: 1.2em;
                color: #333;
            }
            .easy-card-content {
                font-size: 1em;
                color: #555;
            }
        `;

        shadow.appendChild(style);
        shadow.appendChild(this.card);
    }

    connectedCallback() {
        // Add title if provided
        const titleText = this.getAttribute('title');
        if (titleText) {
            const title = document.createElement('h3');
            title.classList.add('easy-card-title');
            title.textContent = titleText;
            this.card.appendChild(title);
        }

        // Move all light DOM content to the shadow DOM content container
        const contentNodes = Array.from(this.childNodes);
        contentNodes.forEach(node => {
            this.content.appendChild(node.cloneNode(true));
        });

        this.card.appendChild(this.content);
    }
}

customElements.define('easy-card', EasyCard);