<script lang="ts" setup>
import { CancelButton } from 'components/button';

defineProps<{
  title: string;
}>();
</script>

<template>
  <div class="dialog-header-container">
    <slot name="before" />
    <div class="dialog-header-main">
      <slot name="title-before" />
      {{ title }}
      <slot name="title-after" />
    </div>
    <slot name="after">
      <CancelButton icon-only v-close-popup />
    </slot>
  </div>
</template>

<style scoped>
.dialog-header-container {
  display: flex;
  align-items: center;
}

.dialog-header-main {
  flex: 1;
  text-align: center;
  font-weight: bolder;
}

.dialog-header-close {
  color: hsl(var(--negative-bg));
  margin-left: auto;

  &.dark {
    background-color: transparent;
    border: 1px solid hsl(var(--negative-bg));
  }
}
</style>
