import Image from "next/image";
import Link from "next/link";
import { FeatureSection } from "@/data/featureData";

type FeatureSectionBlockProps = {
  section: FeatureSection;
};

export default function FeatureSectionBlock({ section }: FeatureSectionBlockProps) {
  const contentColClass = section.isImageFirst ? "col-lg-6 order-lg-2" : "col-lg-6";
  const imageColClass = section.isImageFirst ? "col-lg-6 order-lg-1" : "col-lg-6";
  const contentAos = section.isImageFirst ? "fade-left" : "fade-right";
  const imageAos = section.isImageFirst ? "fade-right" : "fade-left";

  return (
    <section className={section.sectionClassName}>
      <div className="carousel-container">
        <div className="row">
          <div className={contentColClass}>
            <div
              className={section.contentClassName}
              data-aos={contentAos}
              data-aos-duration="900"
              data-aos-delay="300"
            >
              <div className="sec-title mb-0">
                <span className="sub-title">{section.subTitle}</span>
                <h2 className="title">{section.title}</h2>
                <p>{section.description}</p>
              </div>

              {section.checklist && (
                <ul className="feature-list2">
                  {section.checklist.map((item) => (
                    <li key={item}>
                      <Image
                        src="/assets/images/icon/check2-1.svg"
                        alt="Check icon"
                        width={18}
                        height={18}
                      />
                      {item}
                    </li>
                  ))}
                </ul>
              )}

              <Link href={section.buttonPath} className="btn-style1 v2">
                {section.buttonLabel}
                <span>
                  <Image
                    src="/assets/images/icon/arrow.svg"
                    alt="Arrow icon for get started button"
                    width={16}
                    height={16}
                  />
                </span>
              </Link>
            </div>
          </div>

          <div className={imageColClass}>
            <div
              className={section.imageClassName}
              data-aos={imageAos}
              data-aos-duration="900"
              data-aos-delay="300"
            >
              <Image
                src={section.lightImage}
                alt={section.lightImageAlt}
                className="light"
                width={620}
                height={440}
              />
              <Image
                src={section.darkImage}
                alt={section.darkImageAlt}
                className="dark"
                width={620}
                height={440}
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}