'use client';

import React from 'react';
import styles from './ProjetoLayout.module.scss';

export type ProjetoMenuBadgeVariant = 'new' | 'emBreve' | 'count';

interface ProjetoMenuBadgeProps {
    variant: ProjetoMenuBadgeVariant;
    /** Para variant="count" — número a exibir (99+ se >99). */
    count?: number;
    className?: string;
}

/**
 * Badge compacto para itens do Menu do Projeto (Novo / Em breve / contagem).
 * Não estica a linha — fica junto ao rótulo ou à direita.
 */
export function ProjetoMenuBadge({ variant, count, className }: ProjetoMenuBadgeProps) {
    if (variant === 'count') {
        if (count == null || count <= 0) return null;
        return (
            <span
                className={`${styles.projetoMenuBadge} ${styles.projetoMenuBadgeCount}${className ? ` ${className}` : ''}`}
                data-testid="projeto-menu-badge-count"
            >
                {count > 99 ? '99+' : count}
            </span>
        );
    }

    if (variant === 'emBreve') {
        return (
            <span
                className={`${styles.projetoMenuBadge} ${styles.projetoMenuBadgeEmBreve}${className ? ` ${className}` : ''}`}
            >
                Em breve
            </span>
        );
    }

    return (
        <span
            className={`${styles.projetoMenuBadge} ${styles.projetoMenuBadgeNew}${className ? ` ${className}` : ''}`}
            data-testid="projeto-menu-badge-new"
        >
            Novo
        </span>
    );
}