import { render, screen } from '@testing-library/react';
import Header from '@/app/components/Header';
import '@testing-library/jest-dom';

describe('Header', () => {
  it('renders the header', () => {
    render(<Header />);
    expect(screen.getByText('dk')).toBeInTheDocument();
    expect(screen.getByText('0')).toBeInTheDocument();
    
    const aboutButtons = screen.getAllByText('About');
    expect(aboutButtons.length).toBeGreaterThan(0);

    const projectsButtons = screen.getAllByText('Projects');
    expect(projectsButtons.length).toBeGreaterThan(0);

    const contactButtons = screen.getAllByText('Contact');
    expect(contactButtons.length).toBeGreaterThan(0);
  });

  it('renders the mobile header', () => {
    render(<Header />);
    // Check for mobile menu button (hamburger icon)
    const menuButton = screen.getByRole('button');
    expect(menuButton).toBeInTheDocument();
  });
});