import {useTranslation} from 'react-i18next';

import {cn} from '@/lib/utils';
import {equippedBadge} from '../utils/rewards.js';

/** The badge worn from the points shop as a small pill; nothing when none is worn. */
export default function PointsBadge({equipped, className}) {
    const {t} = useTranslation();
    const badge = equippedBadge(equipped);
    if (!badge) return null;
    return (
        <span className={cn('inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium', badge.className, className)}>
            <badge.Icon className="size-3.5"/>{t(`POINTS.ITEMS.${badge.code}`)}
        </span>
    );
}