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

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

	return (
		<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
			<div className="card-body">
				<h2 className="card-title justify-between">
					<span className="card-title">
						<Award className="w-4 h-4" /> Verdiente Abzeichen
					</span>
				</h2>
				<div className="flex flex-wrap gap-2">
					{session.user.badges.map((badge, i) => {
						return <Badge name={badge} key={`${badge} - ${i}`} />;
					})}
				</div>
			</div>
		</div>
	);
};