Frontend/src/app/player/[id]/page.tsx

import { generateEmbed } from "@/common/embed";
import { NotFound } from "@/components/not-found";
import { Card } from "@/components/ui/card";
import { getPlayer } from "mcutils-library";
import { Player } from "mcutils-library/dist/types/player/player";
import { Metadata } from "next";

type Params = {
  params: {
    id: string;
  };
};

export async function generateMetadata({ params: { id } }: Params): Promise<Metadata> {
  const player = await getData(id);
  if (!player) {
    return generateEmbed({ title: "Unknown Player", description: "Player not found" });
  }

  const { username, uniqueId, skin } = player;
  const headPartUrl = skin.parts.head;

  const description = `
    Username: ${username}
    UUID: ${uniqueId}`;

  return generateEmbed({
    title: `${username}`,
    description: description,
    image: headPartUrl,
  });
}

async function getData(id: string): Promise<Player | null> {
  try {
    const cachedPlayer = await getPlayer(id);
    return cachedPlayer.player;
  } catch (error) {
    return null; // Player not found
  }
}

export default async function Page({ params }: Params) {
  const player = await getData(params.id);

  return (
    <div className="h-full flex flex-col items-center">
      <div className="mb-4 text-center">
        <h1 className="text-xl">Lookup a Player</h1>
        <p>You can enter a players uuid or username to get information about the player.</p>
      </div>

      <Card>
        {player == null && <NotFound message="Player not found" />}
        {player != null && (
          <div className="flex flex-col items-center gap-2">
            <p>Username: {player.username}</p>
          </div>
        )}
      </Card>
    </div>
  );
}