import * as React from 'react'
import { cn } from './cva'

export interface DataListProps {
  items: Array<{ term: string; value: React.ReactNode }>
  className?: string
}

export function DataList({ items, className }: DataListProps) {
  return (
    <dl className={cn('grid grid-cols-[max-content_1fr] gap-x-4 gap-y-2', className)}>
      {items.map((item, i) => (
        <React.Fragment key={i}>
          <dt className="text-sm font-medium text-fg-muted">{item.term}</dt>
          <dd className="text-sm text-fg">{item.value}</dd>
        </React.Fragment>
      ))}
    </dl>
  )
}