import Image from 'next/image'
import styles from './threeimg.module.css'

// componente for the  big texts in the middle of the screen 


export default function ThreeImg(props) {
 const content = props.imagesSrc;
 const urlBase = process.env.NEXT_PUBLIC_BASE_URL

 return (
    <>
        <section className={styles.container} >
            <div className={styles.case_images}>
                <div className={styles.wrapper}>
                    <div className={styles.wrapper_container}>
                        <div className={styles.overlay}><button>Criatividade</button></div>
                        <Image src={`${urlBase}${content[0].attributes.formats.small.url}`}  width="600" height="680" alt="" />
                    </div>
                </div>
                <div className={styles.wrapper}>
                    <div className={styles.wrapper_container}>
                        <div className={styles.overlay}><button>Sucesso</button></div>
                        <Image src={`${urlBase}${content[1].attributes.formats.small.url}`}  width="600" height="680" alt="" />
                    </div>
                </div>
                <div className={styles.wrapper}>
                    <div className={styles.wrapper_container}>
                        <div className={styles.overlay}><button>Inovação</button></div>
                        <Image src={`${urlBase}${content[2].attributes.formats.small.url}`}  width="600" height="680" alt="" />
                    </div>
                </div>
            </div>
        </section>

    </>
  )
}