import React, { FC, Fragment } from 'react'

export interface HowToStep {
  term: string
  description: string
}

const HowToSteps: FC<{ steps: Array<HowToStep> }> = ({ steps }) => (
  <dl className="how-to-steps">
    {steps.map(step => (
      <Fragment key={step.term}>
        <dt>{step.term}</dt>
        <dd>{step.description}</dd>
      </Fragment>
    ))}
  </dl>
)

export default HowToSteps