/**
 * Props 表：手写维护，保持和组件定义同步。
 *
 * 只列对外承诺的 props；内部实现用的字段不写进来。
 */
export type PropRow = {
  name: string
  type: string
  required?: boolean
  defaultValue?: string
  desc: string
}

export function PropsTable({ rows }: { rows: PropRow[] }) {
  return (
    <div className="props-table-wrap">
      <table className="props-table">
        <thead>
          <tr>
            <th>属性</th>
            <th>类型</th>
            <th>默认值</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <tr key={row.name}>
              <td>
                <code>{row.name}</code>
                {row.required === true && ' *'}
              </td>
              <td className="props-type">
                <code>{row.type}</code>
              </td>
              <td className="props-type">{row.defaultValue ?? '—'}</td>
              <td>{row.desc}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}