import { NgFor, NgIf } from '@angular/common';
import { Component,  CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';


@Component({
  selector: 'img-carusel',
  standalone: true,
  imports: [NgFor, NgIf],
  templateUrl: './img-carusel.component.html',
  styleUrl: './img-carusel.component.scss',
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ImgCaruselComponent {
  @Input() images!:string[];
  selected?: string | null; 

  public config = {
    slidesPerView: 3,
    initialSlide: 0,
    spaceBetween: 10,
    centeredSlides: true,
    loop: true,
    pagination:{
      enabled: true,
      type: 'fraction',
      el:'.carusel-navigation-counter'
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    keyboard: true,
    mousewheel: true
  };

  public configMobile = {
    slidesPerView: 1,
    initialSlide: 0,
    spaceBetween: 10,
    centeredSlides: true,
    loop: true,
    pagination:{
      enabled: true,
      type: 'fraction',
      el:'.carusel-navigation-counter'
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    keyboard: true,
    mousewheel: true
  };

  select(img:string){
    this.selected = img
  }
}
