import { describe, it, expect } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { PageHeaderProvider, usePageHeader } from '../../../src/components/layout/PageHeaderContext';

function TestComponent() {
  const { header, setHeader } = usePageHeader();
  return (
    <div>
      <span data-testid="title">{header.title}</span>
      <button onClick={() => setHeader({ title: 'New Title' })}>Change</button>
    </div>
  );
}

describe('PageHeaderContext', () => {
  it('provides and updates header state', () => {
    render(
      <PageHeaderProvider>
        <TestComponent />
      </PageHeaderProvider>
    );

    expect(screen.getByTestId('title').textContent).toBe('MeshiTrack');
    
    fireEvent.click(screen.getByText('Change'));
    expect(screen.getByTestId('title').textContent).toBe('New Title');
  });

  it('returns fallback when used outside provider', () => {
    render(<TestComponent />);
    // Outside provider title returns '' fallback
    expect(screen.getByTestId('title').textContent).toBe('');
  });
});