import React from 'react';
import {Box, Container, Heading, HStack, Slide} from "@chakra-ui/react";
import {Data} from "../../models/game";
import ImageSlider from "../detailsComponents/ImageSlider";

interface Props {
    isOpen: boolean
    game: Data
}

const GameThumbnailSlide = ({isOpen, game}: Props) => {
    return (
        <Slide direction="bottom" in={isOpen} unmountOnExit={true} style={{zIndex: 10}}>
            <Box
                p="40px"
                color="white"
                mt="4"
                bgGradient={'linear(to-br, #314755, #26a0da)'}
                borderTopRadius="md"
                shadow="md"
            >
                <Container maxW="container.xl">
                    <HStack spacing='2rem'>
                        <ImageSlider game={game} width={'250px'}/>
                        <Box>
                            <Heading>{game.title}</Heading>
                            {game.shortDesc}
                        </Box>
                    </HStack>
                </Container>
            </Box>
        </Slide>
    );
};

export default GameThumbnailSlide;
