<template>
  <el-space alignment="flex-start" :size="10">
    <img :width="97" :height="72" :src="news ?? DefaultIconNews" alt="" />
    <el-space direction="vertical" alignment="flex-start" :size="0" fill>
      <div class="full-width flex-display">
        <common-text :line-limit="1" class="text-title-3-bold text-hover flex-fill"
          color="var(--text-primary-80-color)">
          {{ title }}
        </common-text>
        <common-text class="text-tip-2" color="var(--text-primary-65-color)">
          {{ from }}
        </common-text>
      </div>
      <common-text :line-limit="contentLineLimit" class="text-compact" color="var(--text-primary-65-color)">
        {{ content }}
      </common-text>
    </el-space>
  </el-space>
</template>

<script setup>
import DefaultIconNews from "@/assets/icons/default-icon-news.png";
import { ElSpace } from "element-plus";
import CommonText from "../texts/CommonText.vue";

const props = defineProps({
  img: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ""
  },
  from: {
    type: String,
    default: ""
  },
  content: {
    type: String,
    default: ""
  },
  contentLineLimit: {
    type: Number,
    default: 2
  }
});
</script>
<style lang="scss" scoped>
@use '@/styles/common.scss';
@use '@/styles/container.scss';
</style>