import { render, screen } from '@testing-library/react';
import { NextIntlClientProvider } from 'next-intl';
import NavHubList from './NavHubList';

const ITEMS = [
  { title: 'Earnings', subtitle: 'What you are owed', icon: 'earnings', path: '/nurse/earnings' },
  { title: 'Bank', icon: 'bank', path: '/nurse/bank', badgeCount: 3 },
];

function renderList() {
  return render(
    <NextIntlClientProvider locale="en" messages={{}}>
      <NavHubList items={ITEMS} title="Money" />
    </NextIntlClientProvider>
  );
}

describe('<NavHubList/> component', () => {
  it('renders one link per item, locale-prefixed', () => {
    renderList();
    expect(screen.getByRole('link', { name: /Earnings/ })).toHaveAttribute('href', '/en/nurse/earnings');
    expect(screen.getByRole('link', { name: /Bank/ })).toHaveAttribute('href', '/en/nurse/bank');
  });

  it('renders the section title and item subtitles', () => {
    renderList();
    expect(screen.getByText('Money')).toBeInTheDocument();
    expect(screen.getByText('What you are owed')).toBeInTheDocument();
  });

  it('shows a badge only for an item that has a count', () => {
    renderList();
    // A zero/absent count must not render a stray dot next to the glyph.
    expect(screen.getByText('3')).toBeInTheDocument();
  });
});
