---
import { formatDate, getCoverImage } from "../utils"
const { title, href, cover, tags, date } = Astro.props
const dateFormatted = formatDate(date)
const type = tags?.[0] ?? "默认"

const image = getCoverImage(cover)

const label = `${title} - ${type} - 发表时间 ${dateFormatted}`;
---

<li
  role="listitem"
  class="tile-item item-list nr-scroll-animation"
  style="--nr-animation-transform-y:20%;"
>
  <a
    href={href}
    class="tile tile-list medium-load small-load large-load"
    aria-label={label}
  >
    <div class="tile__media" aria-hidden="true">
      <img class="cover image" src={image} alt="lt" />
    </div>
    <div class="tile__description" aria-hidden="true">
      <div class="tile__head">
        <div class="tile__category">{type}</div>
        <div class="tile__headline">{title}</div>
      </div>
      <div class="tile__timestamp icon-hide icon icon-before icon-clock">
        {dateFormatted}
      </div>
    </div>
  </a>
</li>