<div class="flex flex-col text-center py-12 bg-surface-overlay">
  <ng-container>
    <i [class]="icon + 'text-6xl! mb-4 text-surface-500'" aria-hidden="true"></i>
  </ng-container>
  <span class="text-xl font-semibold mb-2 text-surface-500 block">{{ title }}</span>
  @if (description) {
    <p class="text-surface-500 inline-block">{{ description }}</p>
  }
  <ng-content select="[cta]" #cta class="mt-4 block"></ng-content>
  @if (!hasCtaContent && ctaLabel && showCTA) {
    <p-button class="mt-4" size="small" (click)="ctaClick.emit()">
      {{ ctaLabel }}
      <i class="pi pi-plus" pButtonIcon></i>
    </p-button>
  }
</div>
