import { Grid } from '@stash/ui'
import type { AppItem } from '../../data/types'
import { AppCard } from './AppCard'

/** 应用网格：桌面 4 列，平板 / 手机 2 列（断点由组件库 Grid 负责） */
type AppGridProps = {
  items: AppItem[]
  /** 明细页使用更宽松的间距 */
  variant?: 'home' | 'detail'
  /** 点击卡片打开条目详情 */
  onOpen?: (itemId: string) => void
}

export function AppGrid({ items, variant = 'home', onOpen }: AppGridProps) {
  return (
    <Grid
      columns={4}
      tabletColumns={2}
      mobileColumns={2}
      gap={variant === 'detail' ? 'lg' : 'md'}
    >
      {items.map((item) => (
        <AppCard key={item.id} item={item} onOpen={onOpen} />
      ))}
    </Grid>
  )
}