<script lang="ts">
  import { editorStore } from '$lib/stores/editor';
  import { faExternalLink } from '@fortawesome/free-solid-svg-icons';
  import Fa from 'svelte-fa';
  import Panel from './Panel.svelte';

  export let preview: boolean = false;
  export let handle: boolean = false;
  export let url: string | undefined = undefined;
  export let title: string | undefined = undefined;
</script>

<a
  class="panel cursor-pointer rounded-3xl hover:bg-dark-hover-ui-element-bg/50 dark:hover:bg-light-hover-ui-element-bg/50 active:bg-dark-active-ui-element-bg/50 dark:active:bg-light-active-ui-element-bg/50 transition-colors box-content"
  href={!$editorStore.editMode ? url : undefined}
  target="_blank">
  <Panel {handle} {preview}>
    <div class="flex gap-1" class:title>
      <div class="flex-grow" class:min-w-0={!title}>
        <slot />
      </div>
      <div class="contents text-text-clickable text-xs">
        {#if title}
          <p class="whitespace-nowrap leading-[.8] text-base font-normal">{title}</p>
        {/if}
        <Fa icon={faExternalLink} />
      </div>
    </div>
  </Panel>
</a>

<style lang="postcss">
  div.title {
    @apply flex-col-reverse gap-0;
  }

  div.title > div:last-of-type {
    @apply flex w-full justify-between items-center mb-5;
  }
</style>
