import type { ReactNode } from 'react'
import { Avatar } from './Avatar'
import { Text } from './Typography'
import styles from './EntryRow.module.css'

/**
 * 条目行：头像 + 标题（可带角标）+ 单行描述，整行可点。
 *
 * 点击语义跟站点里的其它卡片一致：不带修饰键时接管点击（走 SPA 路由），
 * 按住 Ctrl/Cmd/Shift/Alt 时保留浏览器默认行为（新标签打开原始链接）。
 */
export type EntryRowProps = {
  title: string
  description?: string
  /** 不带修饰键点击时跳转的地址 */
  href?: string
  /** 头像图片；不传时用 fallback 首字 */
  avatar?: string
  fallback?: string
  /** 头像右下角的认证勾 */
  verified?: boolean
  /** 标题右侧的角标，例如 `<ItemBadge tone="hot">HOT</ItemBadge>` */
  badge?: ReactNode
  /** 接管点击；不传则保持普通链接行为 */
  onOpen?: () => void
  className?: string
}

export function EntryRow({
  title,
  description,
  href = '#',
  avatar,
  fallback,
  verified = false,
  badge,
  onOpen,
  className,
}: EntryRowProps) {
  return (
    <a
      className={[styles.root, className].filter(Boolean).join(' ')}
      href={href}
      title={title}
      onClick={(event) => {
        if (onOpen === undefined) return
        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
        event.preventDefault()
        onOpen()
      }}
    >
      <Avatar size="lg" tone="primary" src={avatar} fallback={fallback} verified={verified} />

      <span className={styles.info}>
        <span className={styles.titleRow}>
          <Text strong truncate className={styles.title}>
            {title}
          </Text>
          {badge}
        </span>
        {description !== undefined && description !== '' && (
          <Text size="xs" tone="muted" truncate>
            {description}
          </Text>
        )}
      </span>
    </a>
  )
}