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

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

export function PageHero({ title, description }: PageHeroProps) {
  return (
    <HeroShell compactBackdrop variant="page">
      <HeroContentMotion variant="page">
        <HeroMotionItem variant="page">
          <p className="inline-flex items-center rounded-pill border border-border/70 bg-background/75 px-4 py-2 text-sm font-medium tracking-[-0.01em] text-foreground/82 shadow-xs backdrop-blur-chrome">
            {title}
          </p>
        </HeroMotionItem>
        <HeroTitle lines={[{ text: title }]} variant="page" />
        {description ? (
          <HeroMotionItem variant="page">
            <p className="mx-auto mt-6 max-w-[34rem] text-base leading-7 text-foreground/72">
              {description}
            </p>
          </HeroMotionItem>
        ) : null}
      </HeroContentMotion>
    </HeroShell>
  );
}
