import React from "react";
import Image from "next/image";
import Link from "next/link";
import { achievementData } from "@/data/home/achievementData";
import { CounterBoxList } from "@/components/shared/CounterBox";

const AchievementSection: React.FC = () => {
  const { img, title, description, btnText, btnUrl, counters } =
    achievementData;

  return (
    <section className="achievment-sec space-bottom">
      <div className="carousel-container">
        <div className="row">
          <div className="col-lg-6">
            <div
              className="achievment-img"
              data-aos="fade-right"
              data-aos-duration={900}
              data-aos-delay={300}
            >
              <Image
                src={img}
                alt="Achievements Image"
                width={600}
                height={400}
              />
            </div>
          </div>
          <div className="col-lg-6">
            <div
              className="achievment-content"
              data-aos="fade-left"
              data-aos-duration={900}
              data-aos-delay={300}
            >
              <div className="sec-title">
                <h2 className="title">{title}</h2>
                <p>{description}</p>
                <Link href={btnUrl} className="btn-style1 v2">
                  {btnText}
                  <span>
                    <Image
                      src="/assets/images/icon/arrow.svg"
                      alt="Arrow Icon"
                      width={18}
                      height={18}
                    />
                  </span>
                </Link>
              </div>
              <CounterBoxList
                counters={counters.map((counter, index) => ({
                  ...counter,
                  className: index === counters.length - 1 ? "mb-0" : "",
                }))}
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default AchievementSection;