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

/**
 * 明细页的分组块：色条 + 小标题 + 该组的内容网格。
 *
 * 色条沿用分区的 `barColor`，与首页卡片标题保持同一套视觉语言；
 * 具体网格由调用方传入（应用 / 海报 / 图文共用同一层外壳）。
 */
type GroupBlockProps = {
  name: string
  /** 分区色条颜色；缺省用主题主色 */
  barColor?: string
  children: ReactNode
}

export function GroupBlock({ name, barColor, children }: GroupBlockProps) {
  return (
    <Space direction="column" gap="sm" align="stretch" className="group-block">
      <div className="group-title">
        <span
          className="group-bar"
          style={barColor !== undefined ? { backgroundColor: barColor } : undefined}
          aria-hidden="true"
        />
        <Title level={4} as="h3">
          {name}
        </Title>
      </div>
      {children}
    </Space>
  )
}