RESTfulMC/Frontend/src/app/components/player/player-result.tsx

/* eslint-disable @next/next/no-img-element */
import Image from "next/image";
import Link from "next/link";
import { CachedPlayer, SkinPart } from "restfulmc-lib";

/**
 * The result of a player search.
 *
 * @param player the player to display
 * @returns the player result jsx
 */
const PlayerResult = ({
	player: {
		uniqueId,
		username,
		skin: { parts },
		legacy,
	},
}: {
	player: CachedPlayer;
}): JSX.Element => (
	<div className="px-2 py-3 flex flex-col gap-3 items-center bg-muted rounded-xl divide-y divide-zinc-700">
		{/* Details */}
		<div className="flex gap-5 items-center">
			{/* Player Head */}
			<Image
				className="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32"
				src={parts.HEAD}
				alt={`${username}'s Head`}
				width={128}
				height={128}
			/>

			{/* Name, Unique ID, and Badges */}
			<div className="flex flex-col gap-1.5">
				<h1 className="text-xl font-bold text-minecraft-green-3">{username}</h1>
				<code className="text-xs xs:text-sm text-zinc-300">{uniqueId}</code>

				{/* Legacy Badge */}
				{legacy && <p className="text-sm font-semibold uppercase">Legacy</p>}
			</div>
		</div>

		{/* Skin Parts */}
		<div className="pt-3 w-[90%] flex flex-col gap-3">
			{/* Header */}
			<h1 className="font-semibold uppercase">Skin Parts</h1>

			{/* Skin Parts */}
			<div className="flex gap-5">
				{Object.entries(parts)
					.filter(
						([part]) =>
							part === SkinPart.HEAD ||
							part === SkinPart.FACE ||
							part === SkinPart.BODY_FLAT
					)
					.map(([part, url], index) => (
						<Link key={index} href={url} target="_blank">
							<img
								className="h-20 sm:h-24 md:h-28 hover:scale-[1.02] transition-all transform-gpu"
								src={url}
								alt={`${username}'s ${part}`}
							/>
						</Link>
					))}
			</div>
		</div>
	</div>
);
export default PlayerResult;