import { HeroShell, HeroTitle } from "@/components/layout/site-hero";

type PageHeroProps = {
  title: string;
  description?: string;
};

export function PageHero({ title, description }: PageHeroProps) {
  return (
    <HeroShell compactBackdrop variant="page">
      <p className="text-sm font-medium tracking-[0.12em] text-foreground/56">
        {title}
      </p>
      <HeroTitle lines={[{ text: title }]} variant="page" />
      {description ? (
        <p className="mx-auto mt-5 max-w-[34rem] text-sm leading-7 text-foreground/64 sm:text-base">
          {description}
        </p>
      ) : null}
    </HeroShell>
  );
}