import { BADGES } from "@repo/db";
import P1 from "./p-1.png";
import P2 from "./p-2.png";
import P3 from "./p-3.png";
import D1 from "./d-1.png";
import D2 from "./d-2.png";
import D3 from "./d-3.png";
import DAY1 from "./day-1-member.png";

const BadgeImage = {
	[BADGES.P1]: P1,
	[BADGES.P2]: P2,
	[BADGES.P3]: P3,
	[BADGES.D1]: D1,
	[BADGES.D2]: D2,
	[BADGES.D3]: D3,
	[BADGES.DAY1]: DAY1,
};

export const Badge = ({ name }: { name: BADGES }) => {
	const image = BadgeImage[name];

	return (
		<span className="badge">
			<img src={image} />
		</span>
	);
};
