/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
import { Game } from "../../components/game";
import { Rule } from "../../components/rule";
import { Games } from "../../config/Games";
import type { JSX } from "react";

/**
 * Renders the /games page.
 * @returns A React Component.
 */
const Gamez = (): JSX.Element => {
  return (
    <main
      className="w-[95%] text-center
      max-w-4xl m-auto mt-16 mb-16 rounded-lg"
    >
      <h1 className="text-5xl">{`Games`}</h1>
      <section>
        <p className="mb-2">{`See how Naomi has appeared in various games.`}</p>
        <Rule />
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-y-5">
          {Games.toSorted((a, b) => {
            return a.name.localeCompare(b.name);
          }).map((game) => {
            return (
              <Game
                alt={game.alt}
                img={game.img}
                key={game.name}
                name={game.name}
                url={game.url}
              />
            );
          })}
        </div>
      </section>
    </main>
  );
};

export default Gamez;