<script lang="ts">
  import { clamp } from '$lib/utils';
  import Spinner from '../elements/Spinner.svelte';

  export let fetchingPreview: boolean | undefined = undefined;
  export let scaleFactor: number = 1.0;
</script>

<div class="relative h-80 overflow-hidden -mt-4 -mx-4 p-4 border-b border-widget-stroke">
  <div
    class="relative widget-preview-container h-72 select-none flex justify-center items-center transition-opacity opacity-100"
    class:opacity-60={fetchingPreview}>
    <div
      class="relative widget flex justify-center items-center pointer-events-none"
      style="--scale: {clamp(scaleFactor, 0, 1) ?? 1.0}">
      <slot />
    </div>
  </div>
  <div
    class="absolute top-0 left-0 bottom-0 right-0 flex justify-center items-center pointer-events-none transition-opacity opacity-0"
    class:opacity-100={fetchingPreview}>
    <div class="relative w-12 h-12 flex justify-center items-center bg-black/40 rounded-lg">
      <Spinner />
    </div>
  </div>
</div>

<style lang="postcss">
  .widget {
    transform: scale(var(--scale, 1));
  }
</style>
