import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { SectionConfig } from '../../shared/models/config';
import { CatalogProductGridComponent } from '../../features/website/catalog/components/product-grid/product-grid.component';
import { ProductCollectionWidgetData } from '../contracts/widget-data.contract';

@Component({
  selector: 'app-product-carousel-widget',
  standalone: true,
  imports: [CommonModule, CatalogProductGridComponent],
  template: `
    <section class="product-carousel-widget">
      @if (data?.title) {
        <h2 class="product-carousel-widget__title">{{ data?.title }}</h2>
      }

      @if (data?.products?.length) {
        <app-catalog-product-grid [products]="data?.products ?? []" />
      } @else if (data?.emptyMessage) {
        <p class="product-carousel-widget__empty">{{ data?.emptyMessage }}</p>
        }
    </section>
  `,
  styles: [
    `
      .product-carousel-widget { display: grid; gap: var(--space-lg, 24px); }

      .product-carousel-widget__title {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--text-primary, #1e3c38);
      }

      .product-carousel-widget__empty { margin: 0; color: var(--text-secondary, #667a77); }
    `
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProductCarouselWidgetComponent {
  @Input() section: SectionConfig | null = null;
  @Input() data: ProductCollectionWidgetData | null = null;

  @Output() productSelected = new EventEmitter<unknown>();
}