import Heading from "@/components/reuseables/Heading";
import { cleanImage } from "@/layout/imageHandling";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";

const HowWeDoIt = ({ data, heading }) => {
  // console.log(data, "datadata");


  return (
    <section className="HowWeDoIt-section ptb-100">
      <Container>
        <div className="section-title">
          <span className="sub-title">{heading?.Subtitle}</span>
          <Heading el="h2" heading={heading?.Title} />
        </div>
        <div
          className=" text-center text-black mb-4 mb-lg-5"
          dangerouslySetInnerHTML={{ __html: heading?.Description }}
        ></div>
        <Row className="row-gap-4 justify-content-center">
          {data?.carddetails &&
            data?.carddetails.map((item, index) => (
              <Col md={4} key={index}>
                <div className="HowWeDoIt_card ">
                  <h2>{item?.Title}</h2>
                  {/* <Image
                    src={cleanImage(item?.Image?.url)}
                    alt=""
                    className="img-fluid position-relative object-cover"
                    fill
                  /> */}
                  <img
                    src={cleanImage(item?.Image?.url)}
                    alt={item?.Title || "Image"}
                    style={{
                      width: "100%",
                      height: "100%",
                      objectFit: "cover",
                      display: "block",
                    }}
                  />
                  <div className="HowWeDoIt_card_content">
                    <h4>{item?.Title}</h4>
                    <div
                      dangerouslySetInnerHTML={{ __html: item?.Description }}
                    ></div>
                  </div>
                </div>
              </Col>
            ))}
        </Row>
      </Container>
    </section>
  );
};

export default HowWeDoIt;