---
import type { HeadlineProps } from "@/types/types";

const {
  title = await Astro.slots.render("title"),
  subtitle = await Astro.slots.render("subtitle"),
  tagline,
  classes = {},
  titleAs = "h2",
} = Astro.props as HeadlineProps;

const {
  container = "max-w-xl",
  title: titleClass = "text-3xl md:text-4xl",
  subtitle: subtitleClass = "text-xl",
  tagline: taglineClass = "",
} = classes;

const Title = titleAs as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
---

{
  (title || subtitle || tagline) && (
    <div class={`mb-4 ${container}`}>
      {tagline && (
        <div
          class={`inline-flex items-center gap-2 px-3 py-1 text-primary text-lg font-semibold ${taglineClass}`}
        >
          {tagline}
        </div>
      )}
      {title && (
        <Title
          class={`font-bold tracking-tight text-foreground mb-4 ${titleClass}`}
          set:html={title}
        />
      )}
      {subtitle && (
        <p
          class={`text-muted-foreground ${subtitleClass}`}
          set:html={subtitle}
        />
      )}
    </div>
  )
}
