<script lang="ts">
  import Handle from '$lib/components/dashboard/editor/Handle.svelte';
  import { editorStore } from '$lib/stores/editor';

  export let preview: boolean = false;
  export let handle: boolean = false;
  export let fit: boolean = false;
  export let full: boolean = false;
  export let invisible: boolean = false;

  $: hasHandle = handle ? $editorStore.editMode : false;
</script>

<div
  class="panel flex-shrink-0 flex"
  class:w-fit={fit}
  class:w-full={full}
  class:visible={!invisible}
  class:widget-preview={preview}>
  {#if hasHandle}
    <Handle pad={true} />
  {/if}
  <div class="panel-content w-full h-fit min-w-0" class:!pl-0={hasHandle} class:-ml-6={hasHandle && invisible}>
    <slot />
  </div>
</div>

<style lang="postcss">
  .panel.visible {
    @apply bg-widget-fill rounded-3xl border border-widget-stroke backdrop-blur-xl transition-colors text-text-header transform-gpu;
  }

  .panel.visible .panel-content {
    @apply p-6;
  }
</style>
