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

/**
 * Renders the /play page.
 * @returns A React Component.
 */
const PlayPage = (): JSX.Element => {
  return (
    <main className="w-[95%] text-center
    max-w-4xl m-auto mt-16 mb-16 rounded-lg">
      <h1 className="text-5xl">{`Play with Naomi`}</h1>
      <section>
        <p className="mb-2">
          {`I play some silly li'l mobile games to keep myself from working non-stop. Here's what I'm currently playing - will you play with me?`}
        </p>
        <Rule />
        <div className="w-full">
          {Play.toSorted((a, b) => {
            return a.name.localeCompare(b.name);
          }).map((game) => {
            return <PlayComponent key={game.name} {...game} />;
          })}
        </div>
      </section>
    </main>
  );
};

export default PlayPage;