import { Component } from '@angular/core';
import { CarouselModule, OwlOptions } from 'ngx-owl-carousel-o';

@Component({
  selector: 'app-brands',
  host: { 'app-brands': 'app-about-brands' },
  imports: [CarouselModule],
  template: `
    <div class="about-brand">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="brand4-slider-all">
              <owl-carousel-o [options]="customOptions">
                @for(item of brandsData;track $index){
                <ng-template carouselSlide>
                  <div class="brand4-single-slider">
                    <img [src]="item" alt="" />
                  </div>
                </ng-template>
                }
              </owl-carousel-o>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class BrandsComponent {
  brandsData: string[] = [
    'assets/img/logo/brand4-logo1.svg',
    'assets/img/logo/brand4-logo2.svg',
    'assets/img/logo/brand4-logo3.svg',
    'assets/img/logo/brand4-logo4.svg',
    'assets/img/logo/brand4-logo5.svg',
  ];

  customOptions: OwlOptions = {
    loop: true,
    margin: 10,
    nav: false,
    dots: false,
    autoplay: true,
    autoplayTimeout: 3000,
    smartSpeed: 1000,
    responsive: {
      0: {
        items: 2,
      },
      900: {
        items: 5,
      },
    },
  };
}
