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

describe('ActionStatusBadge', () => {
  describe('Rendering states', () => {
    it('renders PENDING status with warning variant', () => {
      render(<ActionStatusBadge status="PENDING" />);
      
      expect(screen.getByText('PENDING')).toBeDefined();
    });

    it('renders COMPLETED status with success variant', () => {
      render(<ActionStatusBadge status="COMPLETED" />);
      
      expect(screen.getByText('COMPLETED')).toBeDefined();
    });

    it('renders FAILED status with danger variant', () => {
      render(<ActionStatusBadge status="FAILED" />);
      
      expect(screen.getByText('FAILED')).toBeDefined();
    });

    it('renders IN_PROGRESS status with info variant', () => {
      render(<ActionStatusBadge status="IN_PROGRESS" />);
      
      expect(screen.getByText('IN PROGRESS')).toBeDefined();
    });
  });

  describe('Visual presentation', () => {
    it('formats status text by replacing underscores with spaces', () => {
      render(<ActionStatusBadge status="IN_PROGRESS" />);
      
      expect(screen.getByText('IN PROGRESS')).toBeDefined();
      expect(screen.queryByText('IN_PROGRESS')).toBeNull();
    });

    it('renders with correct size and rounded props', () => {
      const { container } = render(<ActionStatusBadge status="PENDING" />);
      
      // The Badge component should receive size="sm" and rounded="sm"
      expect(container.firstChild).toBeDefined();
    });
  });

  describe('Edge cases', () => {
    it('handles all valid status types without errors', () => {
      const statuses: Array<'PENDING' | 'COMPLETED' | 'FAILED' | 'IN_PROGRESS'> = [
        'PENDING',
        'COMPLETED',
        'FAILED',
        'IN_PROGRESS',
      ];

      statuses.forEach((status) => {
        const { container } = render(<ActionStatusBadge status={status} />);
        expect(container.firstChild).toBeDefined();
      });
    });
  });
});