import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { Product } from '../../../../../core/products/models/product-domain.model';
import { ProductCardComponent } from '../../../../../components/product-card/product-card.component';
import { TranslatePipe } from '../../../../../i18n/translate.pipe';
import { IconComponent } from '../../../../../shared/ui/icon/icon.component';

@Component({
  selector: 'app-catalog-empty-state',
  standalone: true,
  imports: [ProductCardComponent, TranslatePipe, IconComponent],
  templateUrl: './catalog-empty-state.component.html',
  styleUrls: ['./catalog-empty-state.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CatalogEmptyStateComponent {
  @Input() variant: 'category' | 'filtered' = 'category';
  @Input() title = '';
  @Input() message = '';
  @Input() categoryTitle: string | null = null;
  @Input() actionLabel = '';
  @Input() secondaryActionLabel = '';
  @Input() popularCategories: Array<{ id: string | number; label: string }> = [];
  @Input() popularSearches: string[] = [];
  @Input() recommendedProducts: Product[] = [];

  @Output() action = new EventEmitter<void>();
  @Output() secondaryAction = new EventEmitter<void>();
  @Output() popularCategorySelected = new EventEmitter<string | number>();
  @Output() popularSearchSelected = new EventEmitter<string>();
  @Output() recommendedProductSelected = new EventEmitter<Product>();
  @Output() recommendedAddToCart = new EventEmitter<{ product: Product; event: Event }>();
}
