---
import { formatDate } from "../utils"
const { title, href, cover, tags, date, level } = Astro.props

const dateFormatted = formatDate(date)
const type = tags[0]
const label = `${title} - ${type} - 发表时间 ${dateFormatted}`
const image = cover?.url ?? cover ?? "https://oss.nbtca.space/CA-logo.svg";

// level 1: hero
// level 2: 2up
// level 3: 3up
---

<li
  role="listitem"
  class:list={[
    "tile-item",
    "nr-scroll-animation",
    {
      "item-hero": level === "1",
      "item-2up": level === "2",
      "item-3up": level === "3",
    },
  ]}
  style="--nr-animation-transform-y:20%;"
>
  <a
    href={href}
    class:list={[
      "tile",
      "large-load",
      "medium-load",
      "small-load",
      {
        "tile-hero": level === "1",
        "tile-2up": level === "2",
        "tile-3up": level === "3",
      },
    ]}
    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>