import type { ReactNode } from "react";

interface PageHeroProps {
  imageUrl: string;
  kicker: string | ReactNode;
  title?: string | null;
  subtitle?: string | null;
  defaultTitle: ReactNode;
  defaultSubtitle: string;
  minHeightClass?: string;
}

export function PageHero({
  imageUrl,
  kicker,
  title,
  subtitle,
  defaultTitle,
  defaultSubtitle,
  minHeightClass = "min-h-[60vh]",
}: PageHeroProps) {
  return (
    <section
      className={`relative ${minHeightClass} overflow-hidden text-white px-6 md:px-10`}
    >
      <img
        src={imageUrl}
        alt=""
        className="absolute inset-0 h-full w-full object-cover"
      />
      <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-black/20" />
      <div
        className={`relative z-10 mx-auto flex ${minHeightClass} max-w-6xl flex-col justify-center px-6 pt-24 md:px-10`}
      >
        <div className="text-sm uppercase tracking-[0.2em] text-white/80">
          {kicker}
        </div>
        <h1 className="mt-4 text-4xl font-semibold leading-tight md:text-6xl">
          {title ? title : defaultTitle}
        </h1>
        <p className="mt-4 max-w-xl text-base text-white/80 md:text-lg">
          {subtitle ? subtitle : defaultSubtitle}
        </p>
      </div>
    </section>
  );
}