use new api format

src/app/(pages)/player/[[...id]]/page.tsx

@@ -1,12 +1,9 @@
 /* eslint-disable @next/next/no-img-element */
 import { Card } from "@/app/components/card";
-import { NotFound } from "@/app/components/not-found";
+import { ErrorCard } from "@/app/components/error-card";
 import { LookupPlayer } from "@/app/components/player/lookup-player";
 import { generateEmbed } from "@/common/embed";
-import { getPlayer } from "mcutils-library";
-import { CachedPlayer } from "mcutils-library/dist/types/cache/cachedPlayer";
-import { McUtilsAPIError } from "mcutils-library/dist/types/error";
-import { Player, SkinPart } from "mcutils-library/dist/types/player/player";
+import { CachedPlayer, McUtilsAPIError, SkinPart, getPlayer } from "mcutils-library";
 import { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
@@ -18,57 +15,39 @@ type Params = {
 };
 
 export async function generateMetadata({ params: { id } }: Params): Promise<Metadata> {
-  const { error, player } = await fetchPlayer(id);
+  try {
+    const player = await getPlayer(id);
 
-  if (error && player == undefined) {
-    return generateEmbed({ title: "Unknown Player", description: error });
-  }
+    const { username, uniqueId, skin } = player;
+    const headPartUrl = skin.parts.head;
 
-  const { username, uniqueId, skin } = player as Player;
-  const headPartUrl = skin.parts.head;
-
-  const description = `
+    const description = `
     Username: ${username}
     UUID: ${uniqueId}`;
 
-  return generateEmbed({
-    title: `${username}`,
-    description: description,
-    image: headPartUrl,
-  });
-}
-
-/**
- * Gets the player's data from the uuid or username
- *
- * @param id the player's uuid or username
- * @returns the player's data or an error message
- */
-async function getData(id: string): Promise<CachedPlayer | null> {
-  return await getPlayer(id);
-}
-
-/**
- * Fetches the player's data from the uuid or username
- *
- * @param id the player's uuid or username
- * @returns the player's data or an error message
- */
-async function fetchPlayer(id: string): Promise<{ error: string | undefined; player: Player | undefined }> {
-  let error: string | undefined = undefined;
-  let player: Player | undefined = undefined;
-
-  try {
-    player = (await getData(id))?.player;
+    return generateEmbed({
+      title: `${username}`,
+      description: description,
+      image: headPartUrl,
+    });
   } catch (err) {
-    error = (err as McUtilsAPIError).message;
+    return generateEmbed({
+      title: "Player Not Found",
+      description: (err as McUtilsAPIError).message,
+    });
   }
-
-  return { error, player };
 }
 
 export default async function Page({ params: { id } }: Params): Promise<JSX.Element> {
-  const { error, player } = await fetchPlayer(id);
+  let error: string | undefined = undefined; // The error to display
+  let player: CachedPlayer | undefined = undefined; // The player to display
+
+  // Try and get the player to display
+  try {
+    player = id ? await getPlayer(id) : undefined;
+  } catch (err) {
+    error = (err as McUtilsAPIError).message; // Set the error message
+  }
 
   return (
     <div className="h-full flex flex-col items-center">
@@ -79,9 +58,9 @@ export default async function Page({ params: { id } }: Params): Promise<JSX.Elem
         <LookupPlayer />
       </div>
 
-      <Card className="w-max xs:w-fit">
-        {error && <NotFound message={error} />}
-        {player != null && (
+      {error && <ErrorCard message={error} />}
+      {player != undefined && (
+        <Card className="w-max xs:w-fit">
           <div className="flex gap-4 flex-col xs:flex-row">
             <div className="flex justify-center xs:justify-start">
               <Image
@@ -116,8 +95,8 @@ export default async function Page({ params: { id } }: Params): Promise<JSX.Elem
               </div>
             </div>
           </div>
-        )}
-      </Card>
+        </Card>
+      )}
     </div>
   );
 }