---
import type { HTMLAttributes } from "astro/types"
import { classMerge } from "~ui/utils/classMerge"

interface Props {
  title: string
  subtitle?: string
  titleClass?: string
  subtitleClass?: string
  innerClass?: string
  class?: string
  restProps?: HTMLAttributes<"header">
}

const p = Astro.props
---

<header class={p.class}>
  <div class={classMerge("flex flex-wrap justify-between items-center gap-4", p.innerClass)} {...p.restProps}>
    <h1 class={classMerge("text-2xl font-semibold", p.titleClass)}>{p.title}</h1>
    <slot />
  </div>
  {p.subtitle && <p class={classMerge("text-lg", p.subtitleClass)}>{p.subtitle}</p>}
  <slot name="subtitle" />
</header>