import { prisma } from "@/prisma/prismaClient";
import CreateGameSystem from "./create";
import { GameSystemsClient } from "./client";
import Link from "next/link";

export default async function GameSystems() {
  const existingGameSystems = await prisma.gameSystem.findMany({
    orderBy: {
      created: "asc",
    },
  });

  return (
    <GameSystemsClient>
      <section className="heading">
        <h2 className="strapline">Tabletop Commander</h2>
        <h1>Game Systems</h1>
      </section>
      <section className="mb-6">
        <CreateGameSystem />
      </section>
      <section className="">
        <ul>
          {existingGameSystems.map((g) => (
            <li key={g.id} className="odd:bg-black/20 p-2 text-lg">
              <Link href={`/game-systems/${g.id}`}>{g.name}</Link>
            </li>
          ))}
        </ul>
      </section>
    </GameSystemsClient>
  );
}