<template>
  <header class="flex items-center justify-between border-b bg-surface-white dark:bg-gray-800 dark:border-gray-700 px-5 py-2.5">
    <div class="flex items-center gap-2">
      <slot name="left">
        <h1 class="text-xl font-semibold text-ink-gray-9 dark:text-gray-100">
          {{ title }}
        </h1>
      </slot>
    </div>
    <div class="flex items-center gap-2">
      <slot name="right" />
    </div>
  </header>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: '',
  },
})
</script>
