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

describe('TenantStatusBadge', () => {
    it('renders as a span element', () => {
        const { container } = render(<TenantStatusBadge status="active" />);
        expect(container.firstChild?.nodeName).toBe('SPAN');
    });

    it('displays the status text', () => {
        render(<TenantStatusBadge status="active" />);
        expect(screen.getByText('active')).toBeInTheDocument();
    });

    it.each([
        ['active', 'bg-emerald-100'],
        ['trial', 'bg-sky-100'],
        ['suspended', 'bg-red-100'],
        ['pending', 'bg-amber-100'],
    ] as const)(
        '%s status has the correct base colour class',
        (status, cls) => {
            const { container } = render(<TenantStatusBadge status={status} />);
            expect((container.firstChild as HTMLElement).className).toContain(
                cls,
            );
        },
    );

    it.each([
        ['active', 'text-emerald-700'],
        ['trial', 'text-sky-700'],
        ['suspended', 'text-red-700'],
        ['pending', 'text-amber-700'],
    ] as const)(
        '%s status has the correct text colour class',
        (status, cls) => {
            const { container } = render(<TenantStatusBadge status={status} />);
            expect((container.firstChild as HTMLElement).className).toContain(
                cls,
            );
        },
    );

    it('falls back to muted style for an unknown status', () => {
        const { container } = render(<TenantStatusBadge status="unknown" />);
        expect((container.firstChild as HTMLElement).className).toContain(
            'bg-muted',
        );
    });

    it('has capitalize in the class list for all statuses', () => {
        const { container } = render(<TenantStatusBadge status="active" />);
        expect((container.firstChild as HTMLElement).className).toContain(
            'capitalize',
        );
    });
});