import { Award } from "lucide-react";
import { getServerSession } from "../../api/auth/[...nextauth]/auth";
import { Badge } from "@repo/shared-components";
import { JSX } from "react";

export const Badges: () => Promise<JSX.Element> = async () => {
	const session = await getServerSession();
	if (!session) return <div />;

	return (
		<div className="card-body">
			<h2 className="card-title justify-between">
				<span className="card-title">
					<Award className="h-4 w-4" /> Verdiente Abzeichen
				</span>
			</h2>
			<div className="flex flex-wrap gap-2">
				{session.user.badges.length === 0 && (
					<span className="text-sm text-gray-500">
						Noch ziemlich leer hier. Du kannst dir Abzeichen erarbeiten indem du an Events
						teilnimmst.
					</span>
				)}
				{session.user.badges.map((badge, i) => {
					return <Badge badge={badge} key={`${badge} - ${i}`} />;
				})}
			</div>
		</div>
	);
};