components/alert-card.js

class CustomAlertCard extends HTMLElement {
    connectedCallback() {
        const type = this.getAttribute('type') || 'alert';
        const location = this.getAttribute('location') || 'Unknown';
        const time = this.getAttribute('time') || 'Just now';
        const priority = this.getAttribute('priority') || 'medium';
        
        const priorityColors = {
            'critical': 'red',
            'high': 'orange',
            'medium': 'yellow',
            'low': 'green'
        };
        
        const typeIcons = {
            'motion': 'activity',
            'door': 'unlock',
            'temperature': 'thermometer',
            'power': 'zap',
            'fire': 'flame',
            'water': 'droplet'
        };
        
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .alert-card {
                    border-left: 4px solid;
                    transition: all 0.2s ease;
                }
                .alert-card:hover {
                    transform: translateX(2px);
                }
                .critical {
                    border-left-color: rgb(239, 68, 68);
                }
                .high {
                    border-left-color: rgb(249, 115, 22);
                }
                .medium {
                    border-left-color: rgb(234, 179, 8);
                }
                .low {
                    border-left-color: rgb(34, 197, 94);
                }
            </style>
            <div class="alert-card bg-white p-4 rounded shadow-sm ${priority}">
                <div class="flex items-start">
                    <div class="p-2 rounded-lg bg-${priorityColors[priority]}-100 text-${priorityColors[priority]}-600 mr-3">
                        <i data-feather="${typeIcons[type] || 'alert-circle'}"></i>
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between items-start">
                            <h4 class="font-medium text-gray-800 capitalize">${type} detected</h4>
                            <span class="text-xs text-gray-500">${time}</span>
                        </div>
                        <p class="text-sm text-gray-600 mt-1">Location: ${location}</p>
                        <div class="mt-2 flex justify-between items-center">
                            <span class="text-xs px-2 py-1 rounded bg-${priorityColors[priority]}-100 text-${priorityColors[priority]}-800 capitalize">${priority}</span>
                            <div class="flex space-x-2">
                                <button class="text-xs text-blue-600 hover:text-blue-800">Acknowledge</button>
                                <button class="text-xs text-gray-600 hover:text-gray-800">Details</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
}
customElements.define('custom-alert-card', CustomAlertCard);