import NavigationWrapper from "@/components/NavigationWrapper";
import LeaderboardSection from "@/components/LeaderboardSection";
import { prisma } from "@/lib/prisma";
import { getBackgroundImage } from "@/lib/preferences";

interface LeaderboardEntry {
  rank: number;
  username: string;
  score: number;
  level: number;
  avatar: string | null;
}

export default async function LeaderboardPage() {
  const users = await prisma.user.findMany({
    orderBy: {
      score: "desc",
    },
    take: 10,
    select: {
      id: true,
      username: true,
      score: true,
      level: true,
      avatar: true,
    },
  });

  const leaderboard: LeaderboardEntry[] = users.map((user, index) => ({
    rank: index + 1,
    username: user.username,
    score: user.score,
    level: user.level,
    avatar: user.avatar,
  }));

  const backgroundImage = await getBackgroundImage(
    "leaderboard",
    "/leaderboard-bg.jpg"
  );

  return (
    <main className="min-h-screen bg-black relative">
      <NavigationWrapper />
      <LeaderboardSection
        leaderboard={leaderboard}
        backgroundImage={backgroundImage}
      />
    </main>
  );
}