<template>
  <div
    class="flex items-center justify-between gap-2 border-b-2 border-surface-800 px-3 py-3"
    :class="{
      'bg-surface-950': !secondary,
      'bg-surface-900': secondary,
    }"
    style="height: 75px;"
  >
    <slot name="left">
      <h1>
        {{ title }}
      </h1>
    </slot>

    <slot name="right" />
  </div>
</template>

<script setup lang="ts">
defineProps<{
  title: string
  secondary?: boolean
}>()
</script>
