import React, { FC } from 'react'

export interface Step {
  title: string
  text: string
}

/**
 * Numbered steps that tell the merchant how to get started with a tip.
 */
const Steps: FC<{ heading: string; steps: Array<Step> }> = ({
  heading,
  steps,
}) => (
  <div className="tips-section">
    <h3 className="tips-section-heading">{heading}</h3>
    <ol className="tips-steps">
      {steps.map((step, index) => (
        <li key={step.title} className="tips-step">
          <span className="tips-step-number" aria-hidden="true">
            {index + 1}
          </span>
          <span className="tips-step-title">{step.title}</span>
          <span className="tips-step-text">{step.text}</span>
        </li>
      ))}
    </ol>
  </div>
)

export default Steps