import React from 'react'
import { getImage } from 'gatsby-plugin-image';

const Image = ({title, image}) => {
    return (
        <div className="flex basis-1/5 max-lg:basis-1/2 h-64 max-md:h-44 max-2xl:h-60 overflow-hidden">
            <div style={{'--image-url': `url(${getImage(image).images.fallback.src})`}} className="[&>h3]:hover:-translate-y-7 w-full bg-cover bg-center hover:scale-105 duration-[2s] ease-[cubic-bezier(0, 1, 0.35, 1)] transition-all flex items-center justify-center relative bg-no-repeat bg-[linear-gradient(to_bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),var(--image-url)] ">
                <h3 className='transition uppercase text-white font-medium text-center max-md:text-sm'>{title}</h3>
            </div>
        </div>
    )
}

export default Image