import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router';
import { describe, expect, it } from 'vitest';
import PageHeader from './PageHeader';

/**
 * The one page-title treatment. Rendered inside a MemoryRouter since an
 * optional `back` link uses react-router's `Link` directly.
 */
describe('PageHeader', () => {
  it('renders the title as the level-1 heading', () => {
    render(
      <MemoryRouter>
        <PageHeader title="Daily Challenge" />
      </MemoryRouter>,
    );
    expect(screen.getByRole('heading', { level: 1, name: 'Daily Challenge' })).toBeInTheDocument();
  });

  it('renders the description when given', () => {
    render(
      <MemoryRouter>
        <PageHeader title="Daily Challenge" description="One puzzle a day." />
      </MemoryRouter>,
    );
    expect(screen.getByText('One puzzle a day.')).toBeInTheDocument();
  });

  it('omits the description when not given', () => {
    render(
      <MemoryRouter>
        <PageHeader title="Daily Challenge" />
      </MemoryRouter>,
    );
    expect(screen.queryByText('One puzzle a day.')).toBeNull();
  });

  it('renders page-level actions', () => {
    render(
      <MemoryRouter>
        <PageHeader title="Daily Challenge" actions={<button type="button">Share</button>} />
      </MemoryRouter>,
    );
    expect(screen.getByRole('button', { name: 'Share' })).toBeInTheDocument();
  });

  it('omits the actions slot when not given', () => {
    render(
      <MemoryRouter>
        <PageHeader title="Daily Challenge" />
      </MemoryRouter>,
    );
    expect(screen.queryByRole('button')).toBeNull();
  });

  it('renders a back link with the given label and href', () => {
    render(
      <MemoryRouter>
        <PageHeader title="Daily Challenge" back={{ to: '/', label: 'Home' }} />
      </MemoryRouter>,
    );
    const back = screen.getByRole('link', { name: /Home/ });
    expect(back).toHaveAttribute('href', '/');
  });

  it('omits the back link when not given', () => {
    render(
      <MemoryRouter>
        <PageHeader title="Daily Challenge" />
      </MemoryRouter>,
    );
    expect(screen.queryByRole('link')).toBeNull();
  });

  it('merges a custom className', () => {
    const { container } = render(
      <MemoryRouter>
        <PageHeader title="Daily Challenge" className="mt-4" />
      </MemoryRouter>,
    );
    expect(container.firstElementChild?.className).toContain('mt-4');
    expect(container.firstElementChild?.className).toContain('mb-6');
  });
});