import { Avatar, ItemBadge, Space, Text } from '@stash/ui'
import type { AppItem } from '../../data/types'

/**
 * 应用卡片：头像 + 名称（热门带 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)
      }}
    >
      <Avatar
        size="lg"
        tone="primary"
        className="app-card-avatar"
        src={item.cover}
        fallback={item.icon}
        verified={item.hot === true}
      />

      <div className="app-card-info">
        <Space gap="xs">
          <Text strong truncate className="app-card-name">
            {item.name}
          </Text>
          {item.hot === true && <ItemBadge tone="hot">HOT</ItemBadge>}
        </Space>
        <Text size="xs" tone="muted" truncate>
          {item.desc}
        </Text>
      </div>
    </a>
  )
}