import React from 'react'

export interface DescriptionItem {
  label: string
  value: React.ReactNode
}

export interface DescriptionListProps {
  items: DescriptionItem[]
  layout?: 'vertical' | 'grid'
  divider?: boolean
  className?: string
}

export const DescriptionList: React.FC<DescriptionListProps> = ({
  items,
  layout = 'vertical',
  divider = false,
  className = '',
}) => {
  const isGrid = layout === 'grid'

  const itemClass = divider
    ? 'flex justify-between items-center text-body-sm py-3'
    : 'flex justify-between items-center text-body-sm'

  const containerClass = isGrid
    ? `grid grid-cols-2 gap-x-8 gap-y-3 ${className}`
    : divider
      ? `divide-y divide-slate-100 ${className}`
      : `space-y-3 ${className}`

  return (
    <dl className={containerClass}>
      {items.map((item, index) => (
        <div key={index} className={itemClass}>
          <dt className="text-slate-500">{item.label}</dt>
          <dd className="font-semibold text-slate-800">{item.value}</dd>
        </div>
      ))}
    </dl>
  )
}