import { cleanImage } from '@/layout/imageHandling'
import React from 'react'
import { Col, Container, Row } from 'react-bootstrap'

const WhatWeDoWhatDontDo = (heading, data, image) => {
    console.log(heading, "WhatWeDoWhatDontDo")
    const image2 = heading?.image;
    const data2 = heading?.data?.list;
    // console.log(image2, "WhatWeDoWhatDontDo")
    const backgroundImageUrl = cleanImage(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 lg={12}>
                        <h2>{data?.Title}</h2>
                    </Col>
                    {/* <Col lg={6} md={12}> */}
                    <div className="call-back-request-text">
                        <span className="sub-title">{data?.subtitle}</span>
                        {/* <Heading el="h2" heading={title} className="h2" /> */}
                        <h2>{data?.title}</h2>
                        {/* <p>{description}</p> */}
                        <div
                            className="content"
                            dangerouslySetInnerHTML={{ __html: data?.content }}
                        />
                    </div>
                    {/* </Col> */}
                </Row>
            </Container>
        </div>
    )
}

export default WhatWeDoWhatDontDo