<script lang="ts">
  import * as Sidebar from '$lib/components/ui/sidebar/index.js';
  import { cn } from '$lib/utils/cn.svelte.js';
  import type { Snippet } from 'svelte';

  let {
    title = '',
    children,
  }: { title?: string; children?: Snippet } = $props();
</script>

<header class="bg-background sticky top-0 z-10 flex h-14 items-center gap-2 border-b px-4">
  <Sidebar.Trigger class="-ml-1" />
  <div class="flex items-center gap-2">
    <h1 class={cn('text-sm font-medium', !title && 'hidden md:block')}>
      {title}
    </h1>
  </div>
  <div class="ml-auto flex items-center gap-2">
    {@render children?.()}
  </div>
</header>