import { Grid } from '@stash/ui'
import type { ArticleItem } from '../../data/types'
import { CesCard } from './CesCard'

/** 明细页图文网格：桌面 4 列，平板 2 列，手机 1 列 */
type CesCardGridProps = {
  items: ArticleItem[]
  /** 点击卡片打开文章详情 */
  onOpen?: (itemId: string) => void
}

export function CesCardGrid({ items, onOpen }: CesCardGridProps) {
  return (
    <Grid columns={4} tabletColumns={2} mobileColumns={1} gap="lg">
      {items.map((item) => (
        <CesCard key={item.id} item={item} onOpen={onOpen} />
      ))}
    </Grid>
  )
}