<section class="catalog-empty-state card" [attr.data-variant]="variant">
  <div class="catalog-empty-state__icon" aria-hidden="true">
    @if (variant === 'category') {
      <app-icon name="package" [size]="40" />
    } @else {
      <app-icon name="search" [size]="40" />
    }
  </div>

  <div class="catalog-empty-state__content">
    <h2>{{ title }}</h2>

    @if (categoryTitle) {
      <p class="catalog-empty-state__category">{{ categoryTitle }}</p>
    }

    <p>{{ message }}</p>
  </div>

  @if (actionLabel) {
    <button type="button" class="catalog-empty-state__action" (click)="action.emit()">{{ actionLabel }}</button>
  }

  @if (secondaryActionLabel) {
    <button type="button" class="catalog-empty-state__action secondary" (click)="secondaryAction.emit()">{{ secondaryActionLabel }}</button>
  }

  @if (variant === 'filtered' && popularCategories.length > 0) {
    <div class="catalog-empty-state__block">
      <strong>{{ 'search.popularCategories' | translate }}</strong>
      <div class="catalog-empty-state__chips">
        @for (category of popularCategories; track category.id) {
          <button type="button" class="catalog-empty-state__chip" (click)="popularCategorySelected.emit(category.id)">{{ category.label }}</button>
        }
      </div>
    </div>
  }

  @if (variant === 'filtered' && popularSearches.length > 0) {
    <div class="catalog-empty-state__block">
      <strong>{{ 'catalog.popularSearchesTitle' | translate }}</strong>
      <div class="catalog-empty-state__chips">
        @for (entry of popularSearches; track $index) {
          <button type="button" class="catalog-empty-state__chip" (click)="popularSearchSelected.emit(entry)">{{ entry }}</button>
        }
      </div>
    </div>
  }

  @if (variant === 'filtered' && recommendedProducts.length > 0) {
    <div class="catalog-empty-state__block catalog-empty-state__recommendations">
      <strong>{{ 'search.recommendedProducts' | translate }}</strong>
      <div class="catalog-empty-state__products">
        @for (product of recommendedProducts; track product.itemID) {
          <app-product-card
            [item]="product"
            [title]="product.name"
            appearance="compact"
            [addToCartLabel]="'catalog.addToCart' | translate"
            (selected)="recommendedProductSelected.emit(product)"
            (addToCart)="recommendedAddToCart.emit({ product, event: $event.event })" />
        }
      </div>
    </div>
  }
</section>
