'use client'

import type { ComponentRenderProps } from '@json-render/react'

export function Section({ element, children }: ComponentRenderProps) {
  const { title, description } = element.props as { title?: string; description?: string }

  return (
    <div className="mb-5">
      {title && (
        <div className="mb-3">
          <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
          {description && <p className="text-sm text-gray-500 mt-0.5">{description}</p>}
        </div>
      )}
      {children}
    </div>
  )
}
