import type { ReactNode } from 'react'

/**
 * 一个用法示例：标题 + 说明 + 预览区 + 可选代码。
 *
 * 预览区默认横向排列，需要纵向（表单、长文）时传 `layout="column"`。
 */
type DemoProps = {
  title: string
  desc?: ReactNode
  /** 展示给使用方的代码片段 */
  code?: string
  layout?: 'row' | 'column'
  /** 灰底预览，用于白色组件（卡片）看得清边界 */
  muted?: boolean
  children: ReactNode
}

export function Demo({ title, desc, code, layout = 'row', muted = false, children }: DemoProps) {
  const previewClasses = [
    'demo-preview',
    layout === 'column' ? 'demo-preview--column' : undefined,
    muted ? 'demo-preview--muted' : undefined,
  ]
    .filter(Boolean)
    .join(' ')

  return (
    <article className="demo">
      <h3 className="demo-title">{title}</h3>
      {desc !== undefined && <p className="demo-desc">{desc}</p>}

      <div className={previewClasses}>{children}</div>

      {code !== undefined && (
        <pre className="demo-code">
          <code>{code}</code>
        </pre>
      )}
    </article>
  )
}