---
import type { HTMLAttributes } from "astro/types"
import { buttonVariant } from "~ui/button/buttonCva"
import LinkButton from "~ui/link/LinkButton.astro"
import type { MayHaveClass } from "~ui/utils/MayHaveClass"
import { classMerge } from "~ui/utils/classMerge"

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

const p = Astro.props
---

<div class={classMerge("flex flex-wrap items-center justify-between gap-4", p.class)} {...p.restProps}>
  <h2 class={classMerge("text-2xl font-semibold", p.titleClass)}>
    {
      p.href ? (
        <LinkButton href={p.href} icon={p.icon} variant={buttonVariant.link} class="pl-0">
          {p.title}
        </LinkButton>
      ) : (
        p.title
      )
    }
  </h2>
  {p.subtitle && <p class={classMerge("text-lg", p.subtitleClass)}>{p.subtitle}</p>}
  <slot />
</div>