import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { Badge } from '../Badge';
import React from 'react';

describe('Badge Component', () => {
    it('debería renderizar correctamente con hijos', () => {
        render(<Badge>Nuevo</Badge>);
        expect(screen.getByText('Nuevo')).toBeDefined();
    });

    it('debería aplicar las clases de variante correspondientes', () => {
        const { rerender } = render(<Badge variant="success">Aprobado</Badge>);
        let element = screen.getByText('Aprobado');
        expect(element.className).toContain('bg-success/10');

        rerender(<Badge variant="error">Error</Badge>);
        element = screen.getByText('Error');
        expect(element.className).toContain('bg-error/10');
    });

    it('debería renderizar un icono dinámico si es provisto', () => {
        const mockIcon = <span data-testid="badge-icon">⭐</span>;
        render(<Badge icon={mockIcon}>Destacado</Badge>);
        expect(screen.getByTestId('badge-icon')).toBeDefined();
        expect(screen.getByText('Destacado')).toBeDefined();
    });
});