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 cta = heading?.data;
  
console.log(cta, "WhatWeDoWhatDontDo");
  console.log(data,"dat")
  const backgroundImageUrl = cleanImage(heading?.image?.url);
  console.log(backgroundImageUrl, "backgroundImageUrl");
  return (
    <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}>
            {data.map((item) => (
              <div className="download-content">
                <h2>{item?.Title}</h2>
                
              </div>
            ))}
          </Col>
          <Col md={3} className="align-content-center text-center">
            <div className="btn-1">
              <Link href={cta?.URL || '#'} className="default-btn-three">
                {cta?.text}
                <i className="ri-arrow-right-line"></i>
              </Link>
            </div>
          </Col>
        </Row>
      </Container>
    </div>
  );
};

export default WhatWeDoWhatDontDo;