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

@Component({
  selector: 'app-system-health',
  imports: [NgIconComponent],
  template: `
    <div class="card card-h-100">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-start">
          <div>
            <h5 class="text-uppercase mb-3">Santé du Système</h5>
            <h3 class="mb-0 fw-normal text-success">100%</h3>
            <p class="text-muted mb-2">Tous les services opérationnels</p>
          </div>
          <div>
            <ng-icon name="lucideActivity" class="text-success fs-24 svg-sw-10" />
          </div>
        </div>

        <div class="mt-4 space-y-2">
          <div class="d-flex justify-content-between align-items-center">
            <span class="text-muted">API Gateway</span>
            <span class="badge bg-success">Online</span>
          </div>
          <div class="d-flex justify-content-between align-items-center">
            <span class="text-muted">Base de données</span>
            <span class="badge bg-success">Online</span>
          </div>
          <div class="d-flex justify-content-between align-items-center">
            <span class="text-muted">SMS Gateway</span>
            <span class="badge bg-success">Online</span>
          </div>
          <div class="d-flex justify-content-between align-items-center">
            <span class="text-muted">Webhooks</span>
            <span class="badge bg-success">Online</span>
          </div>
        </div>
      </div>
      <div class="card-footer text-muted text-center">
        Dernière vérification: il y a 2 min
      </div>
    </div>
  `,
})
export class SystemHealth {}