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

@Component({
  selector: 'app-operator-performance',
  imports: [NgIconComponent],
  template: `
    <div class="card card-h-100">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-start mb-3">
          <div>
            <h5 class="text-uppercase mb-3">Performance Opérateurs</h5>
          </div>
          <div>
            <ng-icon name="lucideSignal" class="text-warning fs-24 svg-sw-10" />
          </div>
        </div>

        <div class="space-y-3">
          <div class="d-flex justify-content-between align-items-center">
            <span class="text-muted">Orange</span>
            <div class="d-flex align-items-center gap-2">
              <span class="fw-semibold text-success">98.5%</span>
              <div class="progress flex-grow-1" style="width: 100px; height: 6px;">
                <div class="progress-bar bg-success" style="width: 98.5%"></div>
              </div>
            </div>
          </div>

          <div class="d-flex justify-content-between align-items-center">
            <span class="text-muted">MTN</span>
            <div class="d-flex align-items-center gap-2">
              <span class="fw-semibold text-success">96.2%</span>
              <div class="progress flex-grow-1" style="width: 100px; height: 6px;">
                <div class="progress-bar bg-success" style="width: 96.2%"></div>
              </div>
            </div>
          </div>

          <div class="d-flex justify-content-between align-items-center">
            <span class="text-muted">Airtel</span>
            <div class="d-flex align-items-center gap-2">
              <span class="fw-semibold text-warning">87.4%</span>
              <div class="progress flex-grow-1" style="width: 100px; height: 6px;">
                <div class="progress-bar bg-warning" style="width: 87.4%"></div>
              </div>
            </div>
          </div>

          <div class="d-flex justify-content-between align-items-center">
            <span class="text-muted">Moov</span>
            <div class="d-flex align-items-center gap-2">
              <span class="fw-semibold text-info">92.1%</span>
              <div class="progress flex-grow-1" style="width: 100px; height: 6px;">
                <div class="progress-bar bg-info" style="width: 92.1%"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer text-muted text-center">
        Taux de succès moyen: <strong>94.5%</strong>
      </div>
    </div>
  `,
})
export class OperatorPerformance {}