import type { ReactNode } from 'react';
import { SacredMotif } from './motifs';

/** Optional sacred divider + motif beside page titles */
export default function SacredPageHeader({
  children,
  className = '',
}: {
  children: ReactNode;
  className?: string;
}) {
  return (
    <header className={`page-header page-header--sacred ${className}`.trim()}>
      {children}
      <div className="page-header-sacred-motif" aria-hidden>
        <SacredMotif name="hex" opacity={0.55} />
      </div>
    </header>
  );
}