text: import React from "react";
  import { StyledLink } from "../../../components";
  import { GatsbyImage, getImage } from "gatsby-plugin-image";
  import { PlayingCardWrapper } from "./styles";
  
  export function PlayingCard({ title, image }) {
  	const imageQuery = getImage(image.localFile);
  	return (
  		<PlayingCardWrapper>
  			<StyledLink to={`/${encodeURIComponent(title.toLowerCase())}`}>
  				{imageQuery && <GatsbyImage image={imageQuery} alt={title} />}
  				<div className='bottom-tag'>
  					<h2>{title}</h2>
  				</div>
  			</StyledLink>
  		</PlayingCardWrapper>
  	);
  }
  