<template>
  <view class="shadow-card p-24 rounded-6" @click="handleClikc">
    <view class="text-28 text-fore-title font-bold ellipsis-2">{{ data.title }}</view>
    <view class="mt-10 text-26 text-fore-light ellipsis-2">{{ data.description }}</view>
    <view class="mt-10 flex items-center justify-between">
      <view class="px-4 py-4 border border-solid border-primary rounded-4 text-primary text-20">{{ data.type }}</view>
      <view class="flex items-center gap-x-5">
        <uv-icon name="eye" size="12" />
        <text class="mr-12 text-22 text-fore-light">{{ data.clicked }}</text>
        <uv-icon name="clock" size="12" />
        <text class="text-22 text-fore-light">{{ data.sendDate }}</text>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { NewsItem } from '@/types/news';
import { PropType } from 'vue';

const props = defineProps({
  data: {
    type: Object as PropType<NewsItem>,
    default: () => ({})
  }
});

const emit = defineEmits<{
  click: [data: NewsItem]
}>();
const handleClikc = () => {
  emit('click', props.data);
}
</script>
<style lang="scss" scoped></style>