import { Component } from '@angular/core';
import { NgIconComponent } from '@ng-icons/core';

@Component({
  selector: 'app-alert-widget',
  imports: [NgIconComponent],
  template: `
    <div class="card">
      <div class="card-header bg-light d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">Alertes Récentes</h5>
        <span class="badge bg-danger">3</span>
      </div>
      
      <div class="card-body p-0">
        <div class="list-group list-group-flush">
          <div class="list-group-item">
            <div class="d-flex align-items-start">
              <ng-icon name="lucideAlertTriangle" class="text-warning me-2 mt-1"></ng-icon>
              <div class="flex-grow-1">
                <h6 class="mb-1">Taux d'échec élevé Airtel</h6>
                <p class="mb-1 text-muted">Le taux d'échec a augmenté de 15%</p>
                <small class="text-muted">Il y a 30 min</small>
              </div>
            </div>
          </div>
          
          <div class="list-group-item">
            <div class="d-flex align-items-start">
              <ng-icon name="lucideInfo" class="text-info me-2 mt-1"></ng-icon>
              <div class="flex-grow-1">
                <h6 class="mb-1">Maintenance planifiée</h6>
                <p class="mb-1 text-muted">Maintenance ce soir de 22h à 00h</p>
                <small class="text-muted">Il y a 2h</small>
              </div>
            </div>
          </div>
          
          <div class="list-group-item">
            <div class="d-flex align-items-start">
              <ng-icon name="lucideCheckCircle" class="text-success me-2 mt-1"></ng-icon>
              <div class="flex-grow-1">
                <h6 class="mb-1">Nouveau partenaire</h6>
                <p class="mb-1 text-muted">MTN Sénégal configuré avec succès</p>
                <small class="text-muted">Il y a 4h</small>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="card-footer text-center">
        <a href="javascript:void(0)" class="btn btn-sm btn-outline-primary">
          Voir toutes les alertes
        </a>
      </div>
    </div>
  `,
})
export class AlertWidget {}