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

describe('ActionsHeader', () => {
  describe('Rendering states', () => {
    it('renders the provided title', () => {
      const title = 'User Actions';
      render(<ActionsHeader title={title} />);
      
      expect(screen.getByText(title)).toBeDefined();
    });

    it('renders with different titles', () => {
      const titles = ['User Actions', 'System Actions', 'Admin Actions'];
      
      titles.forEach((title) => {
        const { container } = render(<ActionsHeader title={title} />);
        expect(screen.getByText(title)).toBeDefined();
      });
    });
  });

  describe('Visual presentation', () => {
    it('renders the status indicator with correct label', () => {
      render(<ActionsHeader title="Test Title" />);
      
      expect(screen.getByText('SYSTEM_READY')).toBeDefined();
    });

    it('renders the Activity icon', () => {
      const { container } = render(<ActionsHeader title="Test Title" />);
      
      // The StatusIndicator component should render with the Activity icon
      expect(container.firstChild).toBeDefined();
    });

    it('renders with correct heading hierarchy', () => {
      render(<ActionsHeader title="Test Title" />);
      
      // The title should be rendered as an h1 element
      const heading = screen.getByRole('heading', { level: 1 });
      expect(heading).toBeDefined();
      expect(heading.textContent).toBe('Test Title');
    });
  });

  describe('Edge cases', () => {
    it('handles empty string title', () => {
      const { container } = render(<ActionsHeader title="" />);
      
      expect(container.firstChild).toBeDefined();
    });

    it('handles long title', () => {
      const longTitle = 'A very long title that might wrap to multiple lines';
      render(<ActionsHeader title={longTitle} />);
      
      expect(screen.getByText(longTitle)).toBeDefined();
    });

    it('handles special characters in title', () => {
      const specialTitle = 'Actions & Tasks (Admin)';
      render(<ActionsHeader title={specialTitle} />);
      
      expect(screen.getByText(specialTitle)).toBeDefined();
    });
  });
});