import { ReactNode } from 'react'
import styles from './DefinitionList.module.css'

interface DefinitionListProps {
  children: ReactNode
}

interface DefinitionItemProps {
  term: string
  children: ReactNode
}

export function DefinitionList({ children }: DefinitionListProps) {
  return <dl className={styles.definitionlist}>{children}</dl>
}

export function DefinitionItem({ term, children }: DefinitionItemProps) {
  return (
    <>
      <dt className={styles.definitionterm}>{term}</dt>
      <dd className={styles.definitiondescription}>{children}</dd>
    </>
  )
}
