import { cleanImage } from "@/layout/imageHandling";
import Link from "next/link";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";

const WhatWeDoWhatDontDo = (heading, image, cta) => {
  const data = heading?.data;
  const ctaBtn = heading?.cta;
  const backgroundImageUrl = cleanImage(heading?.image?.url);
  
  return (
   <section className="ptb-50">
     <div
      className=""
      style={{
        backgroundImage: `url(${backgroundImageUrl})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
        backgroundRepeat: "no-repeat",
        padding: "60px 0",
      }}
    >
      <Container>
        <Row className="align-items-center">
          <Col md={12}>
            <h2>{heading?.heading?.Title}</h2>
          </Col>

          <Col md={9}>
            <Row>
              {data &&
                data.map((item, index) => (
                  <Col md={6} key={index}>
                    <div className="download-content">
                      <h2>{item?.Title}</h2>
                      <div
                        className="Description"
                        dangerouslySetInnerHTML={{ __html: item.Description }}
                      />
                    </div>
                  </Col>
                ))}
            </Row>
          </Col>
          <Col md={3} className="align-content-center text-center">
            <div className="btn-1">
              <Link href={ctaBtn?.URL || "#"} className="default-btn-three">
                {ctaBtn?.text}
                <i className="ri-arrow-right-line"></i>
              </Link>
            </div>
          </Col>
        </Row>
      </Container>
    </div>
   </section>
  );
};

export default WhatWeDoWhatDontDo;