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

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

export function ArticleGrid({ items, onOpen }: ArticleGridProps) {
  return (
    <Grid columns={4} tabletColumns={2} mobileColumns={1} gap="md">
      {items.map((item) => (
        <ArticleCard key={item.id} item={item} onOpen={onOpen} />
      ))}
    </Grid>
  )
}