<script lang="ts">
  import Banner from './Banner.svelte';
  import { getBioBanner } from '$lib/config';
  import { editorStore } from '$lib/stores/editor';
  import { page } from '$app/stores';

  export let loadTime: number | undefined = undefined;
  export let bioId: number | undefined = undefined;
  export let simple: boolean = false;

  $: noBanner =
    ($page.data.bio?.hasBanner !== true && $editorStore.banner == null) ||
    $editorStore.edits.edits.deleteBanner != null;

  $: isEditor = $page.url.pathname.startsWith('/dashboard');
  $: banner = noBanner
    ? undefined
    : $editorStore.banner
    ? $editorStore.banner
    : bioId
    ? getBioBanner(bioId, isEditor ? loadTime : undefined)
    : undefined;
</script>

<div class="w-full grid">
  {#if !simple}
    <div class="w-full blur-[70px] opacity-40 dark:opacity-80 transition-opacity">
      <Banner {banner} />
    </div>
  {/if}
  <div class="w-full z-[1]">
    <Banner {banner} />
  </div>
</div>

<style lang="postcss">
  div > div {
    @apply col-start-1 row-start-1;
  }
</style>
