import type { ReactNode } from 'react'
import clsx from 'clsx'

interface DetailRowProps {
  label: string
  children: ReactNode
  className?: string
  labelClassName?: string
  valueClassName?: string
}

export function DetailRow({
  label,
  children,
  className,
  labelClassName,
  valueClassName,
}: DetailRowProps) {
  return (
    <div className={clsx('flex flex-col gap-1.5 sm:flex-row sm:items-start sm:gap-4', className)}>
      <dt
        className={clsx(
          'text-sm font-semibold text-gray-700 dark:text-gray-300 sm:w-36 sm:shrink-0',
          labelClassName,
        )}
      >
        {label}
      </dt>
      <dd className={clsx('min-w-0 text-sm text-gray-900 dark:text-gray-100', valueClassName)}>
        {children}
      </dd>
    </div>
  )
}
