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

type featureType = {
  image: string;
  title: string;
  des: string;
}

@Component({
  selector: 'app-features',
  imports: [CarouselModule,RouterLink],
  template: `
   <div class="featured sp3" id="featured">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <div class="hadding3">
                        <h1 data-aos="fade-up" data-aos-duration="700">Featured Case Studies</h1>
                        <div class="space16"></div>
                        <p data-aos="fade-up" data-aos-duration="800">Flexible energy service is a key part of the future of energy. It can help you save money on your electricity bill, and it can also help to reduce your carbon footprint.</p>
                    </div>
                </div>
                <div class="col-lg-5 text-right">
                    <div class="featured-button">
                            <div class="">
                                <a data-aos="fade-up" data-aos-duration="700" class="buttonBox2 fifth" routerLink="/case">View Full Case Studies</a>
                            </div>
                    </div>
                </div>
            </div>
            <div class="space60"></div>
            <div class="row">
                <div class="featured-slider-all" data-aos="fade-up" data-aos-duration="800">
                    <owl-carousel-o [options]="customOptions" class="featured-slider">
                      @for(item of featuresData;track $index){
                         <ng-template carouselSlide>
                          <div class="featured-slider-single">
                            <div class="featured-slider-img img100">
                                <img [src]="item.image" alt="">
                            </div>
                            <div class="featured-slider-hadding hadding3-w">
                                <h4><a routerLink="/case-details1">{{item.title}}</a></h4>
                                <div class="space8"></div>
                                <p>{{item.des}}</p>
                            </div>
                            <div class="featured-slider-button">
                                <a class="buttonBox3" routerLink="/case-details1">Learn More</a>
                            </div>
                            </div>
                        </ng-template>  
                      }  
                    </owl-carousel-o>
                </div>
            </div>
        </div>
      </div>

  `,
  styles: ``
})

export class FeaturesComponent {

  featuresData: featureType[] = [
    {
      image: 'assets/img/image/featured-img1.png',
      title: 'Financial Investment',
      des: 'Describe the challenges faced by the client and how your solutions helped them.'
    },
    {
      image: 'assets/img/image/featured-img2.png',
      title: 'Tax Consulting',
      des: 'Describe the challenges faced by the client and how your solutions helped them.'
    },
    {
      image: 'assets/img/image/featured-img3.png',
      title: 'Financial Investment',
      des: 'Describe the challenges faced by the client and how your solutions helped them.'
    },
    {
      image: 'assets/img/image/featured-img4.png',
      title: 'Tax Consulting',
      des: 'Describe the challenges faced by the client and how your solutions helped them.'
    },
  ]

  customOptions: OwlOptions = {
    loop: true,
    margin: 10,
    nav: true,
    dots: false,
    autoplay: true,
    autoplayTimeout: 6000,
    smartSpeed: 1500,
    navText: [
      '<i class="fa-solid fa-arrow-left"></i>',
      '<i class="fa-solid fa-arrow-right"></i>'
    ],
    responsive: {
      0: {
        items: 1,
      },
      900: {
        items: 3.4,
      },
    }
  };

}
