import { marked } from 'marked';

import styles from './DefinitionItem.module.css';

interface DefinitionItemProps {
  term: string;
  definitions: string[];
}

export default function DefinitionItem({
  term,
  definitions,
}: DefinitionItemProps) {
  return (
    <>
      <dt className={styles.term}>{term}</dt>
      {definitions.map((def, idx) => (
        <dd
          key={idx}
          className={styles.def}
          dangerouslySetInnerHTML={{
            __html: marked.parseInline(def),
          }}
        />
      ))}
    </>
  );
}
