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

  export let data: WidgetExternalSite;
  export let nonInteractive: boolean = false;
  export let handle: boolean = false;
  export let isPreview: boolean = false;
</script>

<InteractivePanel preview={isPreview} url={!nonInteractive ? data.url : undefined} {handle}>
  <div class="flex flex-col gap-1 justify-center">
    <p class="text-lg line-clamp-1 break-all">{data.title || data.url}</p>
    {#if data.title}<p class="text-secondary line-clamp-1 break-all">{data.url}</p>{/if}
  </div>
</InteractivePanel>