import React, { forwardRef } from 'react';
import { Link } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { BsArrowRight } from "@react-icons/all-files/bs/BsArrowRight";
import { motion } from "framer-motion";

const Game = motion(
    forwardRef(({img, title, description, slug}, ref) => {
        const image = getImage(img);

        return (
            <Link ref={ref} to={'/games/' + slug} className={'flex basis-[calc(25%-15px)] max-sm:basis-full max-md:basis-[calc(50%-20px)] max-xl:basis-[calc(33%-20px)] mr-5 max-sm:mr-0 max-sm:last:mb-0 justify-center max-md:[&:nth-child(2n+2)]:mr-0 md:max-xl:[&:nth-child(3n+3)]:mr-0 xl:[&:nth-child(4n+4)]:mr-0 mb-14 max-sm:mb-10 [&>div>h2]:hover:text-yellow-500 [&>div]:hover:scale-105'} itemScope itemType="https://schema.org/Service">
                <div className="flex flex-col transition">
                    <GatsbyImage loading='lazy' className='rounded-lg mb-2 h-60 object-cover' image={image} alt="logo" placeholder="none" itemProp="image"/>
                    <h2 className='text-white text-xl font-medium mb-3 transition' itemProp="name">{title}</h2>
                    <p className='text-gray-300 mb-4 grow' itemProp="description">{description}</p>
                    <p className='more transition flex items-center text-yellow-400'>Подробнее <BsArrowRight className='ml-2'/></p>
                </div>
            </Link>
        );
    })
)

export default Game;