'use client';

import { useEffect, type ReactNode } from 'react';
import { usePageHeader } from './PageHeaderContext';

interface SetPageHeaderProps {
  title: string;
  subtitle?: string;
  crumbs?: string[];
  actions?: ReactNode;
}

/**
 * Call inside a page component to set the TopBar's title/subtitle/crumbs.
 * Renders a visually-hidden heading for accessibility and tests.
 */
export function SetPageHeader({ title, subtitle, crumbs, actions }: SetPageHeaderProps) {
  const { setHeader } = usePageHeader();
  useEffect(() => {
    setHeader({ title, subtitle, crumbs, actions });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [title, subtitle, crumbs?.join(',')]);
  return (
    <h1
      aria-hidden="false"
      style={{
        position: 'absolute',
        width: 1,
        height: 1,
        padding: 0,
        margin: -1,
        overflow: 'hidden',
        clip: 'rect(0,0,0,0)',
        whiteSpace: 'nowrap',
        border: 0,
      }}
    >
      {title}
    </h1>
  );
}