@switch (headerType()) {
  @case ('immersive') {
    <app-immersive-store-header
      [logoUrl]="logoUrl()"
      [backgroundImageUrl]="backgroundImageUrl()"
      [heroContent]="heroContent()"
      [carouselImages]="carouselImages()"
      [showHero]="showHero()"
      [cartQuantity]="cartQuantity()"
      [user]="user()"
      [isAuthenticated]="isAuthenticated()"
      [accountNavigationMenus]="accountNavigationMenus()"
      [ticketsMenu]="ticketsMenu()"
      [displaySearchBar]="displaySeachBar()"
      [displayCart]="displayCart()"
      [cartDisabled]="cartDisabled()"
      [checkoutRemainingSeconds]="checkoutRemainingSeconds()"
      (cartClick)="cartClick.emit()"
      (ticketsClick)="ticketsClick.emit()"
      (loginClick)="loginClick.emit()"
      (logoutClick)="logoutClick.emit()"
      (searchSubmit)="searchSubmit.emit($event)"
    />
  }
  @default {
    <ng-container *ngTemplateOutlet="standardHeader" />
  }
}

<ng-template #standardHeader>
  <app-standard-store-header
    [logoUrl]="logoUrl()"
    [backgroundImageUrl]="backgroundImageUrl()"
    [cartQuantity]="cartQuantity()"
    [user]="user()"
    [isAuthenticated]="isAuthenticated()"
    [accountNavigationMenus]="accountNavigationMenus()"
    [ticketsMenu]="ticketsMenu()"
    [categories]="categories()"
    [displayCategories]="displayCategories()"
    [displaySeachBar]="displaySeachBar()"
    [displayCart]="displayCart()"
    [cartDisabled]="cartDisabled()"
    [checkoutRemainingSeconds]="checkoutRemainingSeconds()"
    (cartClick)="cartClick.emit()"
    (ticketsClick)="ticketsClick.emit()"
    (loginClick)="loginClick.emit()"
    (logoutClick)="logoutClick.emit()"
    (searchSubmit)="searchSubmit.emit($event)"
    (categorySelect)="categorySelect.emit($event)"
  />
</ng-template>

@if (headerType() === 'immersive' && displayCategories() && categories().length) {
  <nav class="immersive-categories" aria-label="Categorías">
    <div class="immersive-categories__list">
      @for (category of categories(); track category.id) {
        <button
          type="button"
          class="immersive-categories__item"
          (click)="categorySelect.emit(category)"
        >
          {{ category.nombre | uppercase }}
        </button>
      }
    </div>
  </nav>
}