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";
import { cn } from "_helpers/cn";

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

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

	return (
		<span className={cn("flex h-fit p-1", className)}>
			<img src={image.src} alt={name} width={100} />
		</span>
	);
};