import { Card, Cover, Space, Text } from '@stash/ui'
import type { ArticleItem } from '../../data/types'

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

export function CesCard({ item, onOpen }: CesCardProps) {
  const body = (
    <Space direction="column" gap="xs" align="stretch">
      <Text strong truncate>
        {item.title}
      </Text>
      <Text size="xs" tone="muted" truncate>
        {item.desc}
      </Text>
    </Space>
  )

  return (
    <Card padding="none" hoverable className="ces-card">
      <Cover
        src={item.cover}
        alt={item.title}
        ratio={16 / 10}
        radius="none"
        onClick={onOpen === undefined ? undefined : () => onOpen(item.id)}
      />
      {onOpen === undefined ? (
        <div className="ces-body">{body}</div>
      ) : (
        <button
          type="button"
          className="ces-body ces-body--button"
          title={item.title}
          onClick={() => onOpen(item.id)}
        >
          {body}
        </button>
      )}
    </Card>
  )
}