add unknown server and unknown player and impl player embed

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

@@ -1,13 +1,46 @@
+import { embedFallback } from "@/common/embed-fallback";
 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";
 
-export const metadata: Metadata = {
-  title: "Lookup Player",
+type Params = {
+  params: {
+    id: string;
+  };
 };
 
+export async function generateMetadata({ params: { id } }: Params): Promise<Metadata> {
+  const player = await getData(id);
+  if (!player) {
+    return embedFallback({ title: "Unknown Player", description: "Player not found" });
+  }
+
+  const { username, uniqueId, skin } = player;
+  const headPartUrl = skin.parts.head;
+
+  const description = `
+    Username: ${username}
+    UUID: ${uniqueId}`;
+
+  return {
+    title: `${username}`,
+    openGraph: {
+      title: `${username}`,
+      description: description,
+      images: [
+        {
+          url: headPartUrl,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary",
+    },
+  };
+}
+
 async function getData(id: string): Promise<Player | null> {
   try {
     const cachedPlayer = await getPlayer(id);
@@ -17,12 +50,6 @@ async function getData(id: string): Promise<Player | null> {
   }
 }
 
-type Params = {
-  params: {
-    id: string;
-  };
-};
-
 export default async function Page({ params }: Params) {
   const player = await getData(params.id);