<script lang="ts">
  import Track from './types/Track.svelte';
  import InteractivePanel from '../elements/InteractivePanel.svelte';
  import WidgetRenderContainer from '../elements/WidgetRenderContainer.svelte';

  export let data: WidgetSoundCloudTrack;
  export let preview: WidgetPreviewSoundCloudTrack | undefined = undefined;
  export let nonInteractive: boolean = false;
  export let handle: boolean = false;
  export let isPreview: boolean = false;
</script>

<InteractivePanel preview={isPreview} title="SoundCloud Track" url={!nonInteractive ? data.url : undefined} {handle}>
  <WidgetRenderContainer hasPreview={preview != null}>
    <Track thumbnail={preview?.thumbnail} title={preview?.title} artist={preview?.authorName} />
  </WidgetRenderContainer>
</InteractivePanel>
