import { Component, OnInit } from '@angular/core';
import { ProductService } from './product.service';

@Component({
  selector: 'app-product-display',
  template: `
    <div *ngIf="products">
      <div *ngFor="let product of products">
        <h2>{{ product.name }}</h2>
        <p>{{ product.description }}</p>
        <img [src]="product.image" alt="{{ product.name }}">
        <p>Availability: {{ product.availability }}</p>
        <p>Slug: {{ product.slug }}</p>
      </div>
    </div>
  `,
})
export class ProductDisplayComponent implements OnInit {
  products: any;

  constructor(private productService: ProductService) {}

  ngOnInit() {
    this.productService.fetchProducts().subscribe(result => {
      this.products = result.data.products;
    });
  }
}