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

function renderHeader(props: Partial<PatientHeaderProps> = {}) {
  return render(
    <ThemeProvider>
      <PatientHeader
        displayName="Zahra Mohammadi"
        relationLabel="Parent"
        genderLabel="Female"
        ageLabel="70 yrs"
        conditionLabels={['Elderly']}
        noConditionsLabel="No conditions"
        {...props}
      />
    </ThemeProvider>,
  );
}

describe('<PatientHeader/> component', () => {
  it('renders name, relation, meta line and conditions', () => {
    renderHeader();
    expect(screen.getByText('Zahra Mohammadi')).toBeInTheDocument();
    expect(screen.getByText('Parent')).toBeInTheDocument();
    expect(screen.getByText('70 yrs · Female')).toBeInTheDocument();
    expect(screen.getByText('Elderly')).toBeInTheDocument();
  });

  it('shows the no-conditions caption when there are none', () => {
    renderHeader({ conditionLabels: [] });
    expect(screen.getByText('No conditions')).toBeInTheDocument();
  });

  it('omits the relation chip when no relation is set', () => {
    renderHeader({ relationLabel: undefined });
    expect(screen.queryByText('Parent')).not.toBeInTheDocument();
    // meta line still renders age · gender
    expect(screen.getByText('70 yrs · Female')).toBeInTheDocument();
  });
});
