<script setup lang="ts">
defineProps<{
  /** For the preview image, only the small image mode is displayed */
  square?: boolean
  /** When it is root card in the list, not appear as a child card */
  root?: boolean
}>()
</script>

<template>
  <div
    of-hidden
    :class="{
      'flex': square,
      'p-4': root,
      'rounded-lg border border-base': !root,
    }"
  >
    <div
      flex flex-col
      display-block of-hidden
      border="base"
      :class="{
        'sm:(min-w-32 w-32 h-32) min-w-22 w-22 h-22 border-r': square,
        'w-full aspect-[1.91] border-b': !square,
        'rounded-lg': root,
      }"
    >
      <div w-full h-full class="skeleton-loading-bg" />
    </div>
    <div
      px3 max-h-2xl
      flex-1 flex flex-col flex-gap-2 sm:flex-gap-3
      :class="[
        root ? 'py2.5 sm:py3' : 'py3  justify-center sm:justify-start',
      ]"
    >
      <div flex class="skeleton-loading-bg" h-4 w-30 rounded :class="root ? '' : 'hidden sm:block'" />
      <div flex class="skeleton-loading-bg" h-5 w="4/5" rounded />
      <div flex="~ col gap-2">
        <div flex class="skeleton-loading-bg" h-4 w-full rounded />
        <div sm:flex hidden class="skeleton-loading-bg" h-4 w="2/5" rounded />
      </div>
    </div>
  </div>
</template>