import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, beforeEach } from 'vitest';
import { Nav } from '../Nav';
import { ThemeProvider } from '../../theme/ThemeProvider';

function renderNav() {
  return render(
    <ThemeProvider>
      <Nav />
    </ThemeProvider>,
  );
}

describe('Nav', () => {
  beforeEach(() => {
    window.localStorage.clear();
    document.documentElement.className = '';
  });

  it('renders all nav links including the CTA', () => {
    renderNav();
    expect(screen.getByText('Pakketten')).toBeInTheDocument();
    expect(screen.getByText('Werkwijze')).toBeInTheDocument();
    expect(screen.getByText('Over')).toBeInTheDocument();
    expect(screen.getByTestId('nav-cta-link')).toHaveTextContent('Start project');
  });

  it('renders the theme toggle with a Dutch accessible label', () => {
    renderNav();
    expect(screen.getByRole('button', { name: 'Wissel kleurthema' })).toBeInTheDocument();
  });

  it('toggles the theme when the toggle button is clicked', () => {
    renderNav();
    const toggle = screen.getByTestId('theme-toggle-button');
    expect(toggle).toHaveAttribute('aria-pressed', 'false');
    fireEvent.click(toggle);
    expect(toggle).toHaveAttribute('aria-pressed', 'true');
  });
});