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

const Person = ({name, post, img}) => {
    return (
        <div className='flex p-6 flex-col basis-1/4 relative h-[550px] mr-6 [&:nth-child(4n+4)]:mr-0'>
            <div className="h-full flex flex-col justify-end max-w-s z-20">
                <h3 className='text-xl text-white mb-3'>{name}</h3>
                <p className='text-base text-white whitespace-pre-wrap'>{post}</p>
            </div>
            <div className="absolute top-0 left-0 h-full before:absolute before:bg-black before:h-full before:w-full before:top-0 before:left-0 before:z-10 before:rounded-lg before:opacity-25">
                <GatsbyImage className='h-full rounded-lg mb-2 object-cover' image={getImage(img)} alt="logo" placeholder="none"/>
            </div>
        </div>
    )
}

export default Person