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

describe('SeverityBadge', () => {
    it('renders "Info" label for severity="info"', () => {
        render(<SeverityBadge severity="info" />);
        expect(screen.getByText('Info')).toBeInTheDocument();
    });

    it('renders "Warning" label for severity="warning"', () => {
        render(<SeverityBadge severity="warning" />);
        expect(screen.getByText('Warning')).toBeInTheDocument();
    });

    it('renders "Critical" label for severity="critical"', () => {
        render(<SeverityBadge severity="critical" />);
        expect(screen.getByText('Critical')).toBeInTheDocument();
    });

    it('applies blue colour class for info', () => {
        const { container } = render(<SeverityBadge severity="info" />);
        expect((container.firstChild as HTMLElement).className).toContain(
            'bg-blue-500/10',
        );
    });

    it('applies amber colour class for warning', () => {
        const { container } = render(<SeverityBadge severity="warning" />);
        expect((container.firstChild as HTMLElement).className).toContain(
            'bg-amber-500/10',
        );
    });

    it('applies red colour class for critical', () => {
        const { container } = render(<SeverityBadge severity="critical" />);
        expect((container.firstChild as HTMLElement).className).toContain(
            'bg-red-500/10',
        );
    });

    it('falls back to info style for an unknown severity', () => {
        const { container } = render(<SeverityBadge severity="unknown_sev" />);
        // Falls back to CONFIG.info
        expect((container.firstChild as HTMLElement).className).toContain(
            'bg-blue-500/10',
        );
        expect(screen.getByText('Info')).toBeInTheDocument();
    });

    it('renders a dot span (no label text) when dot=true', () => {
        const { container } = render(<SeverityBadge severity="critical" dot />);
        const span = container.firstChild as HTMLElement;
        // Dot variant renders an empty span (no visible text) with title attribute
        expect(span.tagName).toBe('SPAN');
        expect(span.title).toBe('Critical');
        expect(span.textContent).toBe('');
    });

    it('dot variant applies the correct dot background class for warning', () => {
        const { container } = render(<SeverityBadge severity="warning" dot />);
        const span = container.firstChild as HTMLElement;
        expect(span.className).toContain('bg-amber-500');
    });

    it('accepts and applies an extra className', () => {
        const { container } = render(
            <SeverityBadge severity="info" className="test-class" />,
        );
        expect((container.firstChild as HTMLElement).className).toContain(
            'test-class',
        );
    });
});