import React from 'react';
import { Link } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { BsArrowRight } from "react-icons/bs";

const Game = ({img, title, description, slug}) => {
    const image = getImage(img)

    return (
        <Link to={slug} className={'flex basis-[calc(25%-15px)] mr-5 justify-center [&:nth-child(4n+4)]:mr-0 mb-14 [&>div>h2]:hover:text-yellow-500 [&>div]:hover:scale-105'}>
            <div className="flex flex-col transition">
                <GatsbyImage className='rounded-lg mb-2 h-60 object-cover' image={image} alt="logo" placeholder="none"/>
                <h2 className='text-white text-xl font-medium mb-3 transition'>{title}</h2>
                <p className='text-gray-300 mb-4 grow'>{description}</p>
                <p className='more transition flex items-center text-yellow-400'>Подробнее <BsArrowRight className='ml-2'/></p>
            </div>
        </Link>
    );
}

export default Game;