<script setup lang="ts">
defineProps<{
  id: number
  name: string
  description: string
  feature_image: string
  infoMode?: boolean
}>()
</script>

<template>
  <div class="chatroom-card">
    <n-image
      v-if="infoMode"
      class="image"
      object-fit="cover"
      preview-disabled
      :src="feature_image"
      width="140"
      height="100"
    />
    <n-image
      v-else
      class="image"
      object-fit="cover"
      preview-disabled
      :src="feature_image"
      width="84"
      height="60"
    />
    <div class="card-body">
      <n-text class="name">{{ name }}</n-text>
      <n-ellipsis :line-clamp="2" style="max-width: 100%" class="description">
        {{ description !== '' ? description : '此聊天室没有任何介绍……神秘的喵！' }}
      </n-ellipsis>
    </div>
    <router-link v-if="infoMode" :to="'/chatroom/' + id">
      <div class="button">前往</div>
    </router-link>
  </div>
</template>

<style scoped lang="scss">
div.chatroom-card {
  background: linear-gradient(80deg, hsl(48 100% 85%), hsl(45 100% 94%));
  border-radius: 4px;
  border: solid 1px #252525;
  padding: 4px;

  display: flex;
  flex-direction: row;
  gap: 6px;

  .image {
    border-radius: 4px;
  }

  div.card-body {
    flex: 1;
    padding: 2px;

    display: flex;
    flex-direction: column;
    gap: 3px;

    .name {
      font-size: 18px;
      font-weight: bold;
    }
  }

  .button {
    height: 100px;
    padding: 0 20px;
    border-radius: 4px;
    background-color: rgb(94 255 11 / 0.3);
    color: #048f01;

    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
