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

function renderSection(props: Partial<React.ComponentProps<typeof FormSection>> = {}) {
  return render(
    <ThemeProvider>
      <FormSection title="Identity" {...props}>
        <input aria-label="national id" />
      </FormSection>
    </ThemeProvider>,
  );
}

describe('<FormSection/> component', () => {
  it('names the group with a heading and renders its fields', () => {
    renderSection({ description: 'Who you are' });
    expect(screen.getByRole('heading', { name: 'Identity' })).toBeInTheDocument();
    expect(screen.getByText('Who you are')).toBeInTheDocument();
    expect(screen.getByLabelText('national id')).toBeInTheDocument();
  });

  it('marks a skippable group as optional instead of showing its status', () => {
    // The whole point of the optional marker is that it wins the slot — a completion count on a
    // group nobody has to fill in is noise.
    renderSection({ optional: true, optionalLabel: 'Optional', status: <span>0 of 3</span> });
    expect(screen.getByText('Optional')).toBeInTheDocument();
    expect(screen.queryByText('0 of 3')).not.toBeInTheDocument();
  });

  it('shows the status line on a required group', () => {
    renderSection({ status: <span>2 of 3</span> });
    expect(screen.getByText('2 of 3')).toBeInTheDocument();
  });
});