import { Component } from '@angular/core';
import { NgIconComponent } from '@ng-icons/core';
import { NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap';
import { CountUpModule } from 'ngx-countup';

@Component({
  selector: 'app-active-subscriptions',
  imports: [NgIconComponent, NgbProgressbarModule, CountUpModule],
  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">Abonnements Actifs</h5>
            <h3 class="mb-0 fw-normal">
              <span [countUp]="12543" data-target="12543">12,543</span>
            </h3>
            <p class="text-muted mb-2">Total abonnements</p>
          </div>
          <div>
            <ng-icon name="lucideUsers" class="text-info fs-24 svg-sw-10" />
          </div>
        </div>

        <ngb-progressbar [value]="82" class="progress-lg mb-3" />

        <div class="d-flex justify-content-between">
          <div>
            <span class="text-muted">Nouveaux</span>
            <h5 class="mb-0">156</h5>
          </div>
          <div class="text-end">
            <span class="text-muted">Renouvellements</span>
            <h5 class="mb-0">89%</h5>
          </div>
        </div>
      </div>
      <div class="card-footer text-muted text-center">
        52 nouveaux abonnements aujourd'hui
      </div>
    </div>
  `,
})
export class ActiveSubscriptions {}