<script setup lang="ts">
import type { Card } from 'masto'

const props = defineProps<{
  card: Card
  /** When it is root card in the list, not appear as a child card */
  root?: boolean
  /** For the preview image, only the small image mode is displayed */
  provider?: string
}>()
</script>

<template>
  <div
    px3 max-h-2xl
    flex flex-col
    :class="[
      root ? 'flex-gap-1 py1 sm:py3' : 'py1 justify-center sm:justify-start',
    ]"
    my-auto
  >
    <p text-secondary ws-pre-wrap break-all line-clamp-1>
      {{ provider }}
    </p>
    <strong
      v-if="card.title" font-normal sm:font-medium line-clamp-1
      break-all ws-pre-wrap
    >{{ card.title }}</strong>
    <p
      v-if="card.description"
      line-clamp-1 break-all sm:break-words text-secondary ws-pre-wrap :class="[root ? 'sm:line-clamp-2' : '']"
    >
      {{ card.description }}
    </p>
  </div>
</template>