import { Space, Title } from '@stash/ui'
import type { ReactNode } from 'react'

/**
 * 明细页的分组块：小标题 + 该组的内容网格。
 *
 * 具体网格由调用方传入（应用 / 海报 / 图文共用同一层外壳），
 * 这样三种类型的「分组」渲染方式保持一致。
 */
type GroupBlockProps = {
  name: string
  children: ReactNode
}

export function GroupBlock({ name, children }: GroupBlockProps) {
  return (
    <Space direction="column" gap="sm" align="stretch" className="group-block">
      <Title level={4} as="h3">
        {name}
      </Title>
      {children}
    </Space>
  )
}