<template>
  <div
    class="group cursor-pointer rounded-lg overflow-hidden border border-transparent hover:border-gray-200 hover:shadow-md transition-all duration-300"
  >
    <!-- 封面图 -->
    <div class="relative overflow-hidden">
      <img
        :src="item.faceUrl"
        class="w-full aspect-[5/3] object-cover group-hover:scale-105 transition-transform duration-300"
      />
      <!-- 推荐角标 -->
      <div
        v-if="item.isRecommend"
        class="absolute top-0 left-0 w-15 h-7 bg-#FFF9B9 flex items-center justify-center border-2px border-solid border-#f4f0eb rounded-tl-lg rounded-br-lg"
      >
        <img class="w-6" src="@/assets/img/culture/recommend.png" alt="" />
        <div class="text-12px text-#000 line-height-12px">推荐</div>
      </div>
      <!-- 底部渐变遮罩 -->
      <div
        class="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
      ></div>
    </div>

    <!-- 文字信息 -->
    <div class="p-2">
      <h3 class="font-medium text-gray-800 mb-2.5 line-clamp-1">
        {{ item.title }}
      </h3>
      <div class="flex items-center justify-between text-xs text-gray-500">
        <div class="flex items-center gap-2">
          <span class="flex items-center gap-0.5">
            <el-icon><IEpView /></el-icon>
            {{ item.viewCount }}
          </span>
          <span class="flex items-center gap-0.5">
            <el-icon><IEpChatDotRound /></el-icon>
            {{ item.replyCount }}
          </span>
          <span class="flex items-center gap-0.5">
            <el-icon><IEpStar /></el-icon>
            {{ item.collectCount }}
          </span>
        </div>
        <div class="text-gray-500">
          {{
            smallerThanXl
              ? dayjs(item.createTime * 1000).format('YYYY-MM-DD')
              : dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm')
          }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
import type { YaArticleCardVo } from '@/api/article/types'

defineProps<{ item: YaArticleCardVo }>()

const breakpoints = useBreakpoints(breakpointsTailwind)
const smallerThanXl = breakpoints.smaller('xl')
</script>
