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;
    // console.log(ctaBtn, "WhatWeDoWhatDontDo");
    console.log(heading, "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 && 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={ctaBtn?.URL || '#'} className="default-btn-three">
                                {ctaBtn?.text}
                                <i className="ri-arrow-right-line"></i>
                            </Link>
                        </div>
                    </Col>
                </Row>
            </Container>
        </div>
    );
};

export default WhatWeDoWhatDontDo;