import React from 'react'
import { Link } from 'react-router-dom'
import { Data } from '../../models/game'
import { Link as ChakraLink, Flex, Heading, Image, LinkBox, LinkOverlay, Spacer, Text } from '@chakra-ui/react'
import GameRating from "../detailsComponents/GameRating";
import SteamAndDeckLogo from "../helperComponents/SteamAndDeckLogo";

interface Props {
    game: Data
    onToggle: () => void
    playState: string
}

export default function GameThumbnail({ onToggle, game, playState }: Props) {

    const gameLink = game.accessedBy[0].store.includes('Steam') && game.steamId.length > 0 ? game.steamId : game._id
    return (
        <>
            <LinkBox
                as={Link}
                to={`/games/${gameLink}`}
                onMouseOver={onToggle}
                onMouseOut={onToggle}
            >
                <LinkOverlay>
                    <Image borderTopRadius="md" src={game.frontImage} alt={game.title} />
                </LinkOverlay>
                <Heading m={2} size="md" my="2">
                    {game.steamId !== '' ? `${game.steamId}: ${game.title}` : `${game.title}`}
                </Heading>
                <Text ml={2}>Play Status: {playState}</Text>
            </LinkBox>
            <Flex m={2}>
                <GameRating game={game} size={'1em'} />
                <Spacer />
                {game.accessedBy[0].store.includes('Steam') && game.steamId.length > 0 && (
                    <ChakraLink href={`steam://run/${game.steamId}`}>
                        <SteamAndDeckLogo size={'2em'} />
                    </ChakraLink>
                )}
            </Flex>
        </>
    )
}
