ANTOOZA-FRONTEND/app/(main)/ranking/_components/MemberGradeBadge.tsx

'use client';

import type { CSSProperties } from 'react';
import type { MemberGradeDto } from '@/types/response/ranking';

interface Props {
	grade: MemberGradeDto|null|undefined;
}

export default function MemberGradeBadge({ grade }: Props) {
	if (!grade) {
		return null;
	}

	const badgeStyle = grade.textColor ? ({ '--grade-color': grade.textColor } as CSSProperties) : undefined;

	return (
		<span className="ranking__grade-badge" style={badgeStyle} title={grade.korName}>
			{grade.image ? (
				// eslint-disable-next-line @next/next/no-img-element
				<img src={grade.image} alt="" className="ranking__grade-icon" />
			) : null}
			<span className="ranking__grade-name">{grade.korName}</span>
		</span>
	);
}