import React from "react";
import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from "next/image";
import { cleanImage } from "../services/imageHandling";

const WeCare = ({weCareData}) => {
  return (
    <section className=" we-care-section sec_padd">
      <div className="custom_containers container">
        {weCareData?.map((item, index) => {
            const isEven = index % 2 === 0;

            return (
              <Row
                className="mb-5 align-items-center justify-content-center"
                key={index}
              >
                <Col
                  md={7}
                  className={`mb-4 ${isEven ? "order-md-1" : "order-md-2"}`}
                >
                  <div className="img-banner">
                    <Image
                      width={868}
                      height={629}
                      src={cleanImage(item?.image?.url)}
                      alt={item?.title}
                      className="img-fluid"
                    />
                  </div>
                </Col>

                <Col md={5} className={`${isEven ? "order-md-2" : "order-md-1"}`}>
                  <div
                    className="title"
                    dangerouslySetInnerHTML={{ __html: item?.title }}
                  ></div>

                  <div
                    className="info"
                    dangerouslySetInnerHTML={{
                      __html: item?.description || "",
                    }}
                  />
                </Col>
              </Row>
            );
          })}
      </div>
    </section>
  );
};

export default WeCare;