import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { ThemeProvider } from '@cameleer/design-system';
import { AlertStateChip } from './AlertStateChip';

function renderWithTheme(ui: React.ReactElement) {
  return render(<ThemeProvider>{ui}</ThemeProvider>);
}

describe('AlertStateChip', () => {
  it.each([
    ['PENDING', /pending/i],
    ['FIRING', /firing/i],
    ['RESOLVED', /resolved/i],
  ] as const)('renders %s label', (state, pattern) => {
    renderWithTheme(<AlertStateChip state={state} />);
    expect(screen.getByText(pattern)).toBeInTheDocument();
  });

  it('shows silenced suffix when silenced=true', () => {
    renderWithTheme(<AlertStateChip state="FIRING" silenced />);
    expect(screen.getByText(/silenced/i)).toBeInTheDocument();
  });
});
