'use client'

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

const paddingMap = { none: 'p-0', sm: 'p-3', md: 'p-5', lg: 'p-6' }

export function Card({ element, children }: ComponentRenderProps) {
  const { title, subtitle, padding = 'md', noBorder } = element.props as {
    title?: string; subtitle?: string; padding?: string; noBorder?: boolean
  }

  return (
    <div className={`bg-white rounded-xl ${noBorder ? '' : 'shadow-sm'} overflow-hidden mb-4`}>
      {title && (
        <div className="px-5 py-4 border-b border-gray-200">
          <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
          {subtitle && <p className="text-sm text-gray-500 mt-0.5">{subtitle}</p>}
        </div>
      )}
      <div className={paddingMap[padding as keyof typeof paddingMap] || paddingMap.md}>
        {children}
      </div>
    </div>
  )
}
