components/module-card.js

class CustomModuleCard extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        const title = this.getAttribute('title') || 'Module';
        const icon = this.getAttribute('icon') || 'box';
        const description = this.getAttribute('description') || 'Interactive learning experience';
        const color = this.getAttribute('color') || 'indigo';
        const link = this.getAttribute('link') || '#';
        
        this.shadowRoot.innerHTML = `
            <style>
                .card {
                    transition: all 0.3s ease;
                }
                
                .card:hover {
                    transform: translateY(-8px);
                    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
                }
                
                .icon-container {
                    transition: all 0.3s ease;
                }
                
                .card:hover .icon-container {
                    transform: scale(1.1);
                }
            </style>
            <a href="${link}" class="card block bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg border border-gray-100">
                <div class="p-6">
                    <div class="icon-container mb-4 w-14 h-14 rounded-lg flex items-center justify-center bg-${color}-100 text-${color}-600">
                        <i data-feather="${icon}" class="w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2 text-gray-800">${title}</h3>
                    <p class="text-gray-600 mb-4">${description}</p>
                    <div class="flex items-center text-${color}-600 font-medium">
                        <span>Start Module</span>
                        <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
                    </div>
                </div>
            </a>
        `;
    }
}

customElements.define('custom-module-card', CustomModuleCard);