import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { staggeredFadeInUp } from '../../../../shared/animations';
import { InViewportDirective } from '../../../../shared/directives/in-viewport.directive';

interface StoreType {
  name: string;
  image: string;
}

@Component({
  selector: 'app-store-types-section',
  standalone: true,
  imports: [CommonModule, InViewportDirective],
  templateUrl: './store-types-section.component.html',
  styleUrls: ['./store-types-section.component.scss'],
  animations: [staggeredFadeInUp]
})
export class StoreTypesSectionComponent {
  storeTypes: StoreType[] = [
    { name: "Supermarket", image: "assets/images/stores/supermarket.png" },
    { name: "Restaurant", image: "assets/images/stores/restaurant.png" },
    { name: "Fish Shop", image: "assets/images/stores/fish-shop.png" },
    { name: "Jewelry", image: "assets/images/stores/jewelry-shop.png" },
    { name: "Electronics", image: "assets/images/stores/electronics-shop.png" },
    { name: "Bakery", image: "assets/images/stores/bakery.png" },
    { name: "Pharmacy", image: "assets/images/stores/pharmacy.png" },
    { name: "Clothing", image: "assets/images/stores/clothing-store.png" },
  ];
  isInView = false;

  onInViewport(inViewport: boolean) {
    if (inViewport && !this.isInView) {
      this.isInView = true;
    }
  }
}
