import React from 'react';
import { useTranslation } from 'react-i18next';
import { getTranslatedText } from '../../utils/i18nUtils';

interface EffectBadgeProps {
    effect: {
        name: string | any;
        icon?: string;
        type?: 'buff' | 'debuff' | 'damage';
        damage_per_tick?: number;
        ticks?: number;
    };
}

export const EffectBadge: React.FC<EffectBadgeProps> = ({ effect }) => {
    const { t } = useTranslation();

    // Determine class based on type or fallback to damage logic
    const badgeClass = effect.type === 'buff' ? 'buff' : 'damage';

    // For translation of effect name
    const effectName = typeof effect.name === 'string'
        ? t(`game.effects.${effect.name}`, effect.name)
        : getTranslatedText(effect.name);

    return (
        <span className={`stat-badge ${badgeClass}`}>
            {effect.icon}
            {effect.damage_per_tick ? (
                <>
                    {effect.damage_per_tick < 0 ?
                        `+${Math.abs(effect.damage_per_tick)}` :
                        `-${effect.damage_per_tick}`} HP
                    {effect.ticks && ` (${effect.ticks})`}
                </>
            ) : (
                effectName
            )}
        </span>
    );
};
