import { useNavigate } from 'react-router-dom'
import '../styles/cardGames.css'
import { handleGameImageError } from '../utils'
import { getGamePageRoute } from 'routes'

type GameCardProps = {
  title: string
  imageUrl: string
}

export const GameCard = ({ title, imageUrl }: GameCardProps) => {
  const navigate = useNavigate()

  return (
    <div
      className='cardGameMainWrapperLink'
      onClick={() => navigate(getGamePageRoute(title))}
    >
      <div className='cardGameMainWrapper'>
        <img
          src={imageUrl}
          onError={handleGameImageError}
          className='cardGameMain'
        />
      </div>
      <div className='cardGameMainTitle'>
        <p>{title}</p>
      </div>
    </div>
  )
}