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

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

    it('displays the plan name text', () => {
        render(<PlanBadge plan="Enterprise" />);
        expect(screen.getByText('Enterprise')).toBeInTheDocument();
    });

    it.each([
        ['Enterprise', 'text-primary'],
        ['Professional', 'bg-teal-100'],
        ['Starter', 'bg-amber-100'],
        ['Free Trial', 'bg-muted'],
    ] as const)('%s has the correct base colour class', (plan, cls) => {
        const { container } = render(<PlanBadge plan={plan} />);
        expect((container.firstChild as HTMLElement).className).toContain(cls);
    });

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

    it('renders Free Trial text correctly', () => {
        render(<PlanBadge plan="Free Trial" />);
        expect(screen.getByText('Free Trial')).toBeInTheDocument();
    });
});