import { Badge, Card, Icon, IconButton, Title } from '@stash/ui'
import type { ReactNode } from 'react'

/**
 * 首页分区卡片：白底容器，组成「色条 + 标题 + 角标 + 更多按钮 + 内容」。
 * 内容由调用方传入，因此同一容器可以承载应用网格、海报网格或图文网格。
 */
type SectionCardProps = {
  title: string
  count: number
  /** 标题左侧色条颜色，不同分类用不同颜色区分 */
  barColor?: string
  /** 点击右上角 ••• 进入该分类的明细视图 */
  onMore?: () => void
  children: ReactNode
}

export function SectionCard({ title, count, barColor, onMore, children }: SectionCardProps) {
  return (
    <Card padding="md" className="section-card">
      <div className="section-header">
        <span className="section-title-wrapper">
          <span className="section-bar" style={{ backgroundColor: barColor }} aria-hidden="true" />
          <span className="section-title-box">
            <Title level={3} as="h2" weight="semibold">
              {title}
            </Title>
            <Badge count={count} tone="danger" className="count-badge" />
          </span>
        </span>

        {onMore !== undefined && (
          <IconButton
            size="xs"
            className="section-more"
            label={`查看${title}全部`}
            icon={<Icon name="more_1_line" />}
            onClick={onMore}
          />
        )}
      </div>

      {children}
    </Card>
  )
}