import { BADGES } from "@repo/db";
import React from "react";

const badgeImageMapping = {
	[BADGES.P1]: "p-1.png",
	[BADGES.P2]: "p-2.png",
	[BADGES.P3]: "p-3.png",
	[BADGES.D1]: "d-1.png",
	[BADGES.D2]: "d-2.png",
	[BADGES.D3]: "d-3.png",
	[BADGES.DAY1]: "day-1-member.png",
};

export const Badge = ({ badge }: { badge: BADGES }) => (
	<img
		src={`${process.env.HUB_URL}/badges/${badgeImageMapping[badge]}`}
		alt="Badge"
		width="80"
		style={{ display: "block", margin: "0 auto" }}
	/>
);