<div class="confirm-dialog">
  <!-- Header -->
  <div class="dialog-header">
    <div class="flex items-center gap-3">
      <i class="fa {{ getIconClass() }} text-2xl"></i>
      <h2 class="text-xl font-semibold">{{ data.title }}</h2>
    </div>
    <button mat-icon-button (click)="onCancel()" class="close-button">
      <i class="fa fa-times"></i>
    </button>
  </div>

  <!-- Body -->
  <div class="dialog-body">
    <p [innerHTML]="data.message"></p>
  </div>

  <!-- Footer -->
  <div class="dialog-footer">
    <button mat-button (click)="onCancel()">
      {{ data.cancelText }}
    </button>
    <button
      mat-raised-button
      [color]="data.confirmColor"
      (click)="onConfirm()">
      {{ data.confirmText }}
    </button>
  </div>
</div>
