<div class="modal-overlay" *ngIf="config" (click)="cancel()">
  <div class="modal-container" (click)="$event.stopPropagation()">
    <div class="modal-header" [class]="'modal-header-' + (config.type || 'info')">
      <div class="modal-icon-wrapper">
        <svg [attr.viewBox]="getIconViewBox()" fill="none" xmlns="http://www.w3.org/2000/svg" class="modal-icon">
          <path *ngIf="config.type === 'success'" [attr.d]="getIconPath()" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <circle *ngIf="config.type !== 'success'" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
          <path *ngIf="config.type !== 'success'" [attr.d]="getIconPath()" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <h3 class="modal-title" *ngIf="config.title">{{ config.title }}</h3>
    </div>
    <div class="modal-body">
      <p class="modal-message">{{ config.message }}</p>
      <div *ngIf="config.type === 'prompt'" class="modal-input-group">
        <label *ngIf="config.inputLabel" class="modal-input-label">{{ config.inputLabel }}</label>
        <input 
          type="{{ config.inputType || 'text' }}"
          [(ngModel)]="inputValue"
          [placeholder]="config.inputPlaceholder || ''"
          class="modal-input"
          (keyup.enter)="confirm()"
          autofocus>
      </div>
    </div>
    <div class="modal-footer">
      <button 
        *ngIf="config.showCancel" 
        class="modal-btn modal-btn-cancel" 
        (click)="cancel()">
        {{ config.cancelText || 'Cancel' }}
      </button>
      <button 
        class="modal-btn modal-btn-confirm" 
        [class]="'modal-btn-' + (config.type || 'info')"
        [disabled]="config.type === 'prompt' && !inputValue"
        (click)="confirm()">
        {{ config.confirmText || 'OK' }}
      </button>
    </div>
  </div>
</div>

