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

describe('PageHeader', () => {
    it('renders the title', () => {
        render(<PageHeader title="Platform Overview" />);
        expect(screen.getByText('Platform Overview')).toBeInTheDocument();
    });

    it('renders the title as an h2 element', () => {
        render(<PageHeader title="Platform Overview" />);
        expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
            'Platform Overview',
        );
    });

    it('renders the description when provided', () => {
        render(
            <PageHeader title="Overview" description="Real-time visibility" />,
        );
        expect(screen.getByText('Real-time visibility')).toBeInTheDocument();
    });

    it('does not render a description element when description is omitted', () => {
        render(<PageHeader title="Overview" />);
        expect(screen.queryByText(/real-time/i)).not.toBeInTheDocument();
    });

    it('renders the action slot when provided', () => {
        render(
            <PageHeader title="Overview" action={<button>Export</button>} />,
        );
        expect(
            screen.getByRole('button', { name: 'Export' }),
        ).toBeInTheDocument();
    });

    it('does not render an action slot when not provided', () => {
        render(<PageHeader title="Overview" />);
        expect(screen.queryByRole('button')).not.toBeInTheDocument();
    });

    it('renders title and description together', () => {
        render(<PageHeader title="Overview" description="Subtitle text" />);
        expect(screen.getByText('Overview')).toBeInTheDocument();
        expect(screen.getByText('Subtitle text')).toBeInTheDocument();
    });

    it('renders all three parts together', () => {
        render(
            <PageHeader
                title="Overview"
                description="Subtitle"
                action={<button>Action</button>}
            />,
        );
        expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
        expect(screen.getByText('Subtitle')).toBeInTheDocument();
        expect(screen.getByRole('button')).toBeInTheDocument();
    });
});