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})`, backgroundImage: `linear-gradient(rgba(24, 23, 23, 0.86), rgba(24, 23, 23, 0.74)), 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 text-white"
                          dangerouslySetInnerHTML={{ __html: item.Description }}
                        />
                      </div>
                    </Col>
                  ))}
              </Row>
            </Col>
            <Col md={3} className="align-content-center text-center">
              <div className="btn-1 text-white">
                <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;