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">
            {heading &&
                <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 mx-auto'
                />
            )}

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

export default DigitalHowWeDoIt