<script lang="ts">
  /** The link preview a server attaches to a status. */
  import type { PreviewCard } from '$lib/api/types'

  interface Props {
    card: PreviewCard
  }

  let { card }: Props = $props()

  const host = $derived.by(() => {
    try {
      return new URL(card.url).hostname.replace(/^www\./, '')
    } catch {
      return card.provider_name ?? ''
    }
  })
</script>

<a class="preview-card" href={card.url} target="_blank" rel="noopener noreferrer" data-card-type={card.type}>
  {#if card.image}
    <img class="preview-card-image" src={card.image} alt="" loading="lazy" decoding="async" />
  {/if}
  <span class="preview-card-body">
    <span class="preview-card-title">{card.title}</span>
    {#if card.description}
      <span class="preview-card-description">{card.description}</span>
    {/if}
    <span class="preview-card-host">{host}</span>
  </span>
</a>
