import type { AppItem } from '../../data/types'

/**
 * 应用卡片：逐项复刻 Alright 主题「推荐作者」条目的结构。
 *
 * 对应主题的：
 *   .flex-avatar  > img.avatar-48 + span.avatar-badge.badge_5
 *   .item-content > h3.font-title.text-md（名字 + span.item-badge.hot）
 *                 + div.text-xs.text-muted.h-1x（单行描述）
 *
 * 热门条目才会同时出现头像角标和 HOT 徽标，普通条目两者都没有。
 */
type AppCardProps = {
  item: AppItem
  onOpen?: (itemId: string) => void
}

export function AppCard({ item, onOpen }: AppCardProps) {
  return (
    <a
      className="app-card"
      href={item.href}
      title={item.name}
      onClick={(event) => {
        if (onOpen === undefined) return
        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
        event.preventDefault()
        onOpen(item.id)
      }}
    >
      <span className="app-card-avatar" aria-hidden="true">
        {item.cover !== undefined ? (
          <img src={item.cover} alt="" loading="lazy" />
        ) : (
          <span className="app-card-letter">{item.icon}</span>
        )}
        {item.hot === true && <span className="app-card-verify" />}
      </span>

      <span className="app-card-info">
        <span className="app-card-title">
          <span className="app-card-name">{item.name}</span>
          {item.hot === true && <span className="app-card-badge" />}
        </span>
        <span className="app-card-desc">{item.desc}</span>
      </span>
    </a>
  )
}