import { render, screen } from '@testing-library/react';
import { ThemeProvider } from '../../theme';
import PaymentStateCard from './PaymentStateCard';

describe('<PaymentStateCard/> component', () => {
  it('renders the title and icon', () => {
    const { container } = render(
      <ThemeProvider>
        <PaymentStateCard icon="error" tone="var(--bal-error)" title="Payment failed" />
      </ThemeProvider>,
    );
    expect(screen.getByText('Payment failed')).toBeInTheDocument();
    expect(container.querySelector('[data-icon="error"]')).toBeInTheDocument();
  });

  it('renders the body only when provided', () => {
    const { rerender } = render(
      <ThemeProvider>
        <PaymentStateCard icon="pending" tone="var(--bal-warning)" title="Waiting" body="Hang tight" />
      </ThemeProvider>,
    );
    expect(screen.getByText('Hang tight')).toBeInTheDocument();

    rerender(
      <ThemeProvider>
        <PaymentStateCard icon="pending" tone="var(--bal-warning)" title="Waiting" />
      </ThemeProvider>,
    );
    expect(screen.queryByText('Hang tight')).not.toBeInTheDocument();
  });

  it('renders the actions slot', () => {
    render(
      <ThemeProvider>
        <PaymentStateCard icon="verified" tone="var(--bal-success)" title="Done">
          <button type="button">Continue</button>
        </PaymentStateCard>
      </ThemeProvider>,
    );
    expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument();
  });
});