import { CommonModule } from '@angular/common';
import { Component, computed, input, output } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { PosCategory, PosProduct } from '../../models/pos.model';

@Component({
  selector: 'app-product-grid',
  standalone: true,
  imports: [CommonModule, TranslateModule],
  templateUrl: './product-grid.component.html',
  styleUrl: './product-grid.component.scss',
})
export class ProductGridComponent {
  products = input<PosProduct[]>([]);
  categories = input<PosCategory[]>([]);
  selectedCategory = input<number | null>(null);
  retailMode = input(false);

  // Pagination inputs
  hasMore = input(false);
  loadingMore = input(false);
  totalProducts = input(0);

  productSelected = output<PosProduct>();
  categoryChanged = output<number | null>();
  loadMore = output<void>();

  // No longer client-side filtering — server handles category filter now
  filteredProducts = computed(() => this.products());
}
