import React from "react";
import Image from "next/image";
import Link from "next/link";
import { serviceData } from "@/data/home/serviceData";

const ServiceSection: React.FC = () => {
  const { subTitle, title, services } = serviceData;

  return (
    <section className="service-sec space">
      <div className="carousel-container">
        <div className="sec-title white">
          <span
            className="sub-title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={300}
          >
            {subTitle}
          </span>
          <h2
            className="title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={400}
          >
            {title}
          </h2>
        </div>
        <div className="faq-box">
          <div
            className="accordion vs-accordion"
            id="accordionExample"
            data-aos="zoom-in"
            data-aos-duration={900}
            data-aos-delay={500}
          >
            {services.map((service, index) => (
              <div className="accordion-item" key={service.id}>
                <h2 className="accordion-header" id={`heading${index}`}>
                  <button
                    className={`accordion-button ${service.isOpen ? "" : "collapsed"}`}
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target={`#collapse${index}`}
                    aria-expanded={service.isOpen ? "true" : "false"}
                    aria-controls={`collapse${index}`}
                  >
                    <span className="title">
                      <span className="nmbr">{service.number}</span>
                      {service.title}
                    </span>
                    <span className="faq-list">
                      {service.tags.map((tag, tagIndex) => (
                        <span className="li" key={tagIndex}>
                          {tag}
                        </span>
                      ))}
                      <span className="li">
                        <Image
                          src="/assets/images/icon/arrow1-1.svg"
                          alt="Arrow Icon"
                          width={14}
                          height={14}
                        />
                      </span>
                    </span>
                  </button>
                </h2>
                <div
                  id={`collapse${index}`}
                  className={`accordion-collapse collapse ${service.isOpen ? "show" : ""}`}
                  role="region"
                  aria-labelledby={`heading${index}`}
                  data-bs-parent="#accordionExample"
                >
                  <div className="accordion-body">
                    <div className="faq-info">
                      <div className="accordion-img">
                        <Image
                          src={service.img1}
                          alt={`${service.title} Image 1`}
                          width={300}
                          height={270}
                        />
                        <Image
                          src={service.img2}
                          alt={`${service.title} Image 2`}
                          width={300}
                          height={270}
                        />
                      </div>
                      <div className="faq-content">
                        <p>{service.description}</p>
                        <Link href={service.url} className="btn-style1">
                          Read more
                          <span>
                            <Image
                              src="/assets/images/icon/arrow.svg"
                              alt="Arrow Icon"
                              width={18}
                              height={18}
                            />
                          </span>
                        </Link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default ServiceSection;