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

    static get observedAttributes() {
        return ['title', 'description', 'image', 'link'];
    }

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

    connectedCallback() {
        this.render();
    }

    render() {
        const title = this.getAttribute('title') || 'Simulation';
        const description = this.getAttribute('description') || 'Interactive biomedical lab simulation';
        const image = this.getAttribute('image') || 'http://static.photos/science/640x360/1';
        const link = this.getAttribute('link') || '#';
        
        this.shadowRoot.innerHTML = `
            <style>
                .card {
                    transition: all 0.3s ease;
                }
                .card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
                }
                .image-container {
                    height: 200px;
                    overflow: hidden;
                }
                .image-container img {
                    transition: transform 0.5s ease;
                }
                .card:hover .image-container img {
                    transform: scale(1.05);
                }
            </style>
            <a href="${link}" class="block">
                <div class="card bg-white rounded-xl shadow-md overflow-hidden h-full">
                    <div class="image-container">
                        <img src="${image}" alt="${title}" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-gray-800 mb-2">${title}</h3>
                        <p class="text-gray-600 mb-4">${description}</p>
                        <div class="flex items-center text-indigo-600 font-medium">
                            <span>Start Simulation</span>
                            <i data-feather="arrow-right" class="ml-2"></i>
                        </div>
                    </div>
                </div>
            </a>
        `;
        
        // Replace feather icons after rendering
        if (feather) {
            feather.replace();
        }
    }
}
customElements.define('custom-simulation-card', CustomSimulationCard);