<div class="overflow-x-auto">
  <div class="w-full overflow-visible flex gap-3 px-4">
    @if (loading()) {
      @for (i of [1, 2, 3, 4, 5]; track i) {
        <p-skeleton width="6rem" height="2.5rem" />
      }
    } @else {
      @for (category of categories(); track category.id) {
        <div
          [class]="
            'h-10 rounded-lg px-3 flex items-center gap-3 border border-surface-border cursor-pointer bg-surface-100 hover:bg-surface-200 transition-all shrink-0' +
            (selectedCategory() === category.id ? ' bg-surface-card' : '')
          "
          (click)="changeSelectedCategory(category)"
        >
          <span class="text-sm text-muted-color font-bold"> {{ category.name }}</span>
          <div
            [class]="
              'flex items-center justify-center py-0.5 px-2 rounded-sm bg-surface-300 text-xs text-muted-color' +
              (selectedCategory() === category.id ? ' bg-amber-400! text-white' : '')
            "
          >
            <span>
              {{ category.goods_count }}
            </span>
          </div>
        </div>
      }
    }
  </div>
</div>
