import { XCircleIcon } from "@heroicons/react/24/outline";
import { prisma } from "@/lib/db";

export default async function Home() {
  const games = await prisma.games.findMany({
    take: 10
  });

  if (games.length === 0) return (
    <div className="p-6 flex flex-col justify-center items-center min-h-[600px] lg:min-h-[700px]">
      <XCircleIcon className="block h-6 w-6 text-slate-400" />
      <p className="text-center font-semibold text-slate-400">No games in your library.</p>
    </div>
  );

  return (
    <div className="p-6 flex flex-col justify-center items-center min-h-[600px] lg:min-h-[700px]">
      {games.map((game, idx) => (
        <p key={idx}>{game.title}</p>
      ))}
    </div>
  )
};