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 ${cmClass || ""}`}>
      {approaches.map((item, index) => {
        const isEven = index % 2 === 0;
        const sectionStyle = {
          backgroundColor: isEven ? "#fbfbfb" : "#e8ebf5",
        };

        return (
          <section
            key={item.id}
            className="wpo-about-section section-padding"
            style={sectionStyle} // Apply full-width bg here
          >
            <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>
  );
};

export default OurApproachSection;