<p-dialog 
  [(visible)]="visible"
  [modal]="true" 
  [draggable]="false"
  [resizable]="false"
  [closeOnEscape]="true"
  [style]="{width: '400px'}"
  [contentStyle]="{'text-align': 'center', 'padding': '20px'}"
  styleClass="alert-dialog"
  [header]="title">
  
  <div class="flex flex-column align-items-center">
    <i class="pi text-8xl mb-4" [ngClass]="getIconClass()"></i>
    <div class="text-xl font-semibold mb-3" *ngIf="title">{{ title }}</div>
    <div class="text-center mb-5">{{ message }}</div>
    
    <div class="flex justify-content-center gap-2">
      <button *ngIf="showCancelButton" pButton (click)="cancel()" 
        class="p-button-outlined p-button-secondary" 
        [label]="cancelButtonText">
      </button>
      <button *ngIf="showConfirmButton" pButton (click)="confirm()" 
        class="p-button-primary" 
        [label]="confirmButtonText">
      </button>
    </div>
  </div>
</p-dialog>