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

type PageHeroProps = {
  badge?: string;
  title: string;
  description?: string;
  lines?: HeroTitleLineValue[];
  locale?: string;
};

function getDefaultLines(title: string): HeroTitleLineValue[] {
  return title.split("\n").filter(Boolean).map((line, index) => ({
    text: line,
    tone: index === 0 ? "soft" : "accent",
    align: "center",
  }));
}

export function PageHero({ badge, title, description, lines, locale }: PageHeroProps) {
  return (
    <HeroShell compactBackdrop variant="page">
      <HeroContentMotion variant="page">
        <HeroMotionItem variant="page">
          <HeroBadge>{badge ?? title}</HeroBadge>
        </HeroMotionItem>
        <HeroTitle lines={lines ?? getDefaultLines(title)} locale={locale} 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>
  );
}