import React from "react";
import Image from "next/image";
import { useTranslation } from "next-i18next";

const OurApproachSection = ({ cmClass }) => {

  const { t } = useTranslation("ourApproach");

  const approaches = t("ourApproach", { returnObjects: true }) || [];

  return (
    <div className={`wpo-about-area section-padding ${cmClass || ""}`}>
      <div className="container">
        {t("page") && (
          <div className="wpo-section-title text-center mb-5">
            <span>{t("page.subtitle")}</span>
            <h2>{t("page.title")}</h2>
          </div>
        )}

        {approaches.map((item, index) => {
          const isEven = index % 2 !== 0;
          const sectionStyle = {
            backgroundColor: index % 2 === 0 ? '#fbfbfbff' : '#e8ebf5',
            color: index % 2 === 0 ? '#ffffffff' : '#fff',
          };
          return (
            <section
              key={item.id}
              className="wpo-about-section section-padding"
              style={sectionStyle}
            >
              <div className="container">
                <div className="wpo-about-wrap">
                  <div className="row align-items-center">
                    <div
                      className={`col-lg-6 col-md-12 col-12 ${
                        isEven ? "order-1 order-lg-1" : "order-1 order-lg-2"
                      }`}
                    >
                      <div className="wpo-about-text">
                        <div className="wpo-section-title">
                          <span>{item.authorTitle}</span>
                          <h2>{item.title}</h2>
                        </div>
                        <p>{item.para}</p>
                        {item.description && (
                          <div
                            dangerouslySetInnerHTML={{ __html: item.description }}
                          />
                        )}
                      </div>
                    </div>
                    <div
                      className={`col-lg-6 col-md-12 col-12 ${
                        isEven ? "order-2 order-lg-2" : "order-2 order-lg-1"
                      }`}
                    >
                      <div className="wpo-about-img">
                        <Image
                          src={item.screens}
                          alt={item.title}
                          width={600}
                          height={400}
                          style={{ objectFit: "cover", borderRadius: "10px" }}
                          unoptimized
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          );
        })}
      </div>
    </div>
  );
};

export default OurApproachSection;