import type { ReactNode } from 'react';

interface PageHeaderProps {
  eyebrow?: string;
  title: string;
  subtitle?: string;
  centered?: boolean;
  className?: string;
  children?: ReactNode;
}

export default function PageHeader({
  eyebrow,
  title,
  subtitle,
  centered = false,
  className = '',
  children,
}: PageHeaderProps) {
  return (
    <div
      className={`mx-auto max-w-7xl px-6 pt-5 pb-6 ${centered ? 'text-center' : ''} ${className}`}
    >
      <div className={`${centered ? 'max-w-3xl mx-auto' : 'max-w-3xl'}`}>
        {eyebrow && (
          <div className="text-[#B38B4D] text-[11px] tracking-[2.5px] mb-2 font-medium uppercase">
            {eyebrow}
          </div>
        )}
        <h1 className="text-2xl sm:text-[1.75rem] md:text-3xl tracking-[-0.8px] leading-[1.15] mb-2 text-[#101724] break-words">
          {title}
        </h1>
        {subtitle && (
          <p
            className={`text-sm md:text-[15px] text-[#4b5563] leading-relaxed ${
              centered ? 'mx-auto max-w-xl' : 'max-w-2xl'
            }`}
          >
            {subtitle}
          </p>
        )}
        {children}
      </div>
    </div>
  );
}