import type { ReactNode } from "react";

type PageHeaderProps = {
  title: string;
  subtitle?: string;
  right?: ReactNode;
};

export function PageHeader({ title, subtitle, right }: PageHeaderProps) {
  return (
    <header className="mb-8 border-b border-gray-200 pb-4">
      <div className="grid grid-cols-[auto,1fr,auto] items-center gap-4">
        <div className="flex items-center">
          <img
            src="/assets/prosento-logo.png"
            alt="Company logo"
            className="h-12 w-auto object-contain"
            loading="eager"
          />
        </div>

        <div className="text-center">
          <h1 className="text-2xl md:text-3xl font-bold text-gray-900 whitespace-nowrap">
            {title}
          </h1>
          {subtitle ? (
            <p className="text-gray-600 whitespace-nowrap">{subtitle}</p>
          ) : null}
        </div>

        <div className="flex justify-end">{right}</div>
      </div>
    </header>
  );
}