import { useState } from "react";

interface GameImageProps {
  game: string;
}

export function GameImage({ game }: GameImageProps) {
  const [error, setError] = useState(false);

  if (error) {
    return (
      <div style={{ width: "100px", marginLeft: "1rem" }}>
        <div
          style={{
            width: "100%",
            height: "150px",
            background: "#ddd",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            color: "#666",
            borderRadius: "8px",
            marginTop: "0.5rem",
          }}
        >
          No Image Available
        </div>
      </div>
    );
  }

  return (
    <div style={{ width: "100px", marginLeft: "1rem" }}>
      <img
        src={`/api/game_thumbnail/${encodeURIComponent(game)}`}
        alt={`${game} cover`}
        onError={() => setError(true)}
        style={{
          width: "100%",
          height: "auto",
          borderRadius: "8px",
          marginTop: "0.5rem",
          objectFit: "cover",
        }}
      />
    </div>
  );
}