import Heading from '@/components/reuseables/Heading'
import { cleanImage } from '@/layout/imageHandling'
import Image from 'next/image'
import React from 'react'
import { Container } from 'react-bootstrap'

const DigitalHowWeDoIt = ({ heading, desktopImage, mobileImage }) => {
    console.log(desktopImage, "desktopImage data");
    console.log(mobileImage, "mobileImage data");

    return (
        <Container className="text-center">
            <div className="section-title">
                <Heading el="h2" heading={heading} />
            </div>

            {desktopImage?.url && (
                <Image
                    src={cleanImage(desktopImage.url)}
                    alt={desktopImage?.alternativeText || "image"}
                    width={1000}
                    height={1000}
                    className='img-fluid d-none d-md-block'
                />
            )}

            {mobileImage?.url && (
                <Image
                    src={cleanImage(mobileImage.url)}
                    alt={mobileImage?.alternativeText || "image"}
                    width={1000}
                    height={1000}
                    className='img-fluid d-block d-md-none'
                />
            )}
        </Container>
    )
}

export default DigitalHowWeDoIt