/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
import Image from "next/image";
import type { JSX } from "react";

interface GameProperties {
  readonly name: string;
  readonly img:  string;
  readonly url:  string;
  readonly alt:  string;
}

/**
 * Renders the view for a game.
 * @param properties - The game to render.
 * @returns A JSX element.
 */
export const Game = (properties: GameProperties): JSX.Element => {
  const { name, img, url, alt } = properties;

  return (
    <div className="w-[300px] h-[300px] border-2
      border-solid border-[--foreground] m-auto text-center items-center">
      <a
        className="text-xl underline"
        href={url}
        rel="noopener noreferrer"
        target="_blank"
      >
        <p>{name}</p>
      </a>
      <a
        href={`https://cdn.nhcarrigan.com/games/${img}`}
        rel="noreferrer"
        target="_blank"
      >
        <Image
          alt={alt}
          className="m-auto object-contain  max-h-[250px] max-w-[250px]"
          height={250}
          src={`https://cdn.nhcarrigan.com/games/${img}`}
          width={250}
        />
      </a>
    </div>
  );
};