<template>
  <header class="c-compact-header" :class="{ 'c-compact-header--is-sticky': isSticky }">
    <div class="container-fluid">
      <div class="c-compact-header__content c-compact-header__content--left">
        <slot name="headerStart" />
      </div>
      <div class="c-compact-header__content c-compact-header__content--center">
        <a v-if="logoUrl && logoHref" :href="logoHref" class="c-compact-header__logo-link js-logo-link">
          <img :src="logoUrl" class="c-compact-header__logo-image" alt="logo" />
        </a>

        <slot name="headerCenter" />
      </div>
      <div class="c-compact-header__content c-compact-header__content--right">
        <slot name="headerEnd" />
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import type StickyHeader from './sticky-header';
import { onUnmounted } from 'vue';

const { isSticky } = defineProps<{
  logoUrl?: string;
  logoHref?: string;
  isSticky?: boolean;
  modifiers?: never;
}>();

if (isSticky && typeof document !== 'undefined') {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  let instance: StickyHeader | null = null;
  import('./sticky-header').then(({ default: StickyHeader }) => {
    instance = new StickyHeader(document);
  });

  onUnmounted(() => {
    instance = null;
  })
}

</script>
