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

/**
 * 明细页图文卡：上图下文的白卡。
 * 传入 onOpen 时整张卡变成按钮，点击进入文章详情。
 */
type CesCardProps = {
  item: ArticleItem
  onOpen?: (itemId: string) => void
}

export function CesCard({ item, onOpen }: CesCardProps) {
  const content = (
    <>
      <img className="ces-cover" src={item.cover} alt={item.title} loading="lazy" />
      <span className="ces-body">
        <span className="ces-title">{item.title}</span>
        <span className="ces-desc">{item.desc}</span>
      </span>
    </>
  )

  if (onOpen === undefined) {
    return <article className="ces-card">{content}</article>
  }

  return (
    <button
      type="button"
      className="ces-card"
      title={item.title}
      onClick={() => onOpen(item.id)}
    >
      {content}
    </button>
  )
}