<template>
  <header class="page-header">
    <div class="page-header__title">
      <UiButton
        v-if="withBackButton"
        icon="arrow-left"
        color="secondary"
        class="mr-24"
        href="/projects"
        type="outlined"
      />

      <h1>{{ title }}</h1>

      <div
        v-if="$slots.default"
        class="page-header__default"
      >
        <slot />
      </div>
    </div>

    <div class="page-header__right">
      <slot name="right">
        <div class="d-flex align-items-center" style="gap: 24px;">
          <NotificationsDropdown />
          <ProfileDropdown />
        </div>
      </slot>
    </div>
  </header>
</template>

<script setup>
defineProps({
  title: {
    type: String,
  },
  withBackButton: {
    type: Boolean,
    default: false,
  },
})

const notify = useNotify()
</script>

<style lang="scss">
@use 'sass:color';

.page-header {
  position: sticky;
  backdrop-filter: blur(4px);
  background-size: 4px 4px;
  background-image: radial-gradient(
    color.change($clr-grey-100, $alpha: 0.7) 2px,
    $clr-cyan-200
  );
  border-bottom: 1px solid #f4f6ff;
  margin-inline: -16px;
  padding-inline: 16px;
  top: 0;
  z-index: 6000;

  display: flex;
  align-items: center;
  justify-content: space-between;

  //margin-bottom: 32px;
  padding-block: 32px;

  &__title {
    display: flex;
    align-items: center;
  }

  &__default {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: 24px;
  }

  &__right {
    display: flex;
    align-items: center;
    gap: 24px;
  }
}
</style>
