import React from 'react';
import Image from 'next/image';
import { useTranslation } from 'next-i18next'
// import Ourapproach from '../../api/our-approach';

const OurApproachSection = () => {
      const { t } = useTranslation('ourApproach')
    return (
        <>
            {ourApproach.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">
                                    {/* Content Column */}
                                    <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>
                                            <div
                                                dangerouslySetInnerHTML={{ __html: item.description }}
                                            />
                                        </div>
                                    </div>

                                    {/* Image Column */}
                                    <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',
                                                }}
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                );
            })}
        </>
    );
};

export default OurApproachSection;