<!-- [DEF:PageHeader:Component] -->
<!--
@TIER: TRIVIAL
@SEMANTICS: page-header, layout-atom
@PURPOSE:   Standardized page header with title and action area.
@LAYER:     Atom
-->

<script>
  // [SECTION: IMPORTS]
  import { cn } from "$lib/utils.js";
  // [/SECTION: IMPORTS]

  // [SECTION: PROPS]
  let {
    title = "",
    class: className = "",
    subtitle = null,
    actions = null,
    ...rest
  } = $props();
  // [/SECTION: PROPS]
</script>

<!-- [SECTION: TEMPLATE] -->
<header
  class={cn("flex items-center justify-between mb-8", className)}
  {...rest}
>
  <div class="space-y-1">
    <h1 class="text-3xl font-bold tracking-tight text-gray-900">{title}</h1>
    {@render subtitle?.()}
  </div>
  <div class="flex items-center gap-4">
    {@render actions?.()}
  </div>
</header>
<!-- [/SECTION: TEMPLATE] -->

<!-- [/DEF:PageHeader:Component] -->
