import { Component, EventEmitter, inject, Output } from '@angular/core';
import { Skeleton } from 'primeng/skeleton';
import { POSStore } from '../../store';

@Component({
  selector: 'pos-product-categories',
  templateUrl: './categories.component.html',
  imports: [Skeleton],
})
export class PosProductCategoriesComponent {
  @Output() categoryChange = new EventEmitter<number>();

  private readonly store = inject(POSStore);

  categories = this.store.productCategories;
  loading = this.store.getProductCategoriesLoading;

  selectedCategory = this.store.activeProductCategory;

  changeSelectedCategory(category: { id: number; name: string }) {
    this.store.changeActiveCategory(category.id);
  }
}
