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

type IndustryItem = {
  image: string;
  title: string;
  description: string;
  readMoreLink: string;
};

@Component({
  selector: 'app-industries',
  host: { 'app-industries': 'app-single-industries8' },
  imports: [RouterLink, CarouselModule],
  template: `
    <div class="case8 sp3" id="case" style="background-color: #E9EDF4;">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 m-auto text-center">
            <div class="hadding8">
              <h1 data-aos="fade-up" data-aos-duration="800">
                Industries we have served
              </h1>
              <div class="space16"></div>
              <p data-aos="fade-up" data-aos-duration="1000">
                Consulting 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>
        <div class="space60"></div>
        <div class="row">
          <div class="col-lg-12">
            <div
              class="industries-slider"
              data-aos="fade-up"
              data-aos-duration="900"
            >
              <owl-carousel-o [options]="customOptions">
                @for (item of industriesData; track item) {
                <ng-template carouselSlide>
                  <div class="industries-slider-single">
                    <div class="industries-box _relative">
                      <div class="industries-img img5">
                        <img [src]="item.image" alt="" />
                      </div>
                      <div class="industries-hadding hadding5">
                        <h4>
                          <a [routerLink]="[]">{{ item.title }}</a>
                        </h4>
                        <div class="space16"></div>
                        <p>{{ item.description }}</p>
                        <div class="space16"></div>
                        <a [routerLink]="item.readMoreLink" class="learn-more5">
                          Read More <i class="fa-solid fa-arrow-right"></i>
                        </a>
                      </div>
                    </div>
                  </div>
                </ng-template>
                }
              </owl-carousel-o>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class IndustriesComponent {
  industriesData: IndustryItem[] = [
    {
      image: 'assets/img/image/industries-img1.png',
      title: 'Finance Consulting',
      description:
        'Our goal is to empower you with the law knowledge, strategies, Our best finance.',
      readMoreLink: '/service-details',
    },
    {
      image: 'assets/img/image/industries-img2.png',
      title: 'Finance Professional',
      description:
        'Our goal is to empower you with the law knowledge, strategies, Our best finance.',
      readMoreLink: '/service-details',
    },
    {
      image: 'assets/img/image/industries-img3.png',
      title: 'Finance Assessment',
      description:
        'Our goal is to empower you with the law knowledge, strategies, Our best finance.',
      readMoreLink: '/service-details',
    },
    {
      image: 'assets/img/image/industries-img1.png',
      title: 'Finance Consulting',
      description:
        'Our goal is to empower you with the law knowledge, strategies, Our best finance.',
      readMoreLink: '/service-details',
    },
  ];

  customOptions: OwlOptions = {
    loop: true,
    margin: 10,
    nav: true,
    dots: false,
    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,
      },
    },
  };
}
