import { BADGES } from "@repo/db";
import { cn } from "../helper/cn";
import * as 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",
	[BADGES.V1Veteran]: "v1-veteran.png",
};

export const Badge = ({
	badge,
	className,
	width = 80,
}: {
	badge: BADGES;
	className?: string;
	width?: number;
}) => {
	return (
		<span className={cn("h-fit h-full p-1 flex justify-center items-center", className)}>
			<img
				src={`${process.env.NEXT_PUBLIC_HUB_URL}/badges/${badgeImageMapping[badge]}`}
				alt="Badge"
				width={width}
				height="auto"
				style={{ maxWidth: `${width}px` }}
				className="block h-auto w-auto"
			/>
		</span>
	);
};