import React from 'react'

export default function SectionBlock({
  step,
  title,
  subtitle,
  aside,
  children,
}) {
  return (
    <section className="workflow-section" style={{ '--section-order': Number(step) || 1 }}>
      <header className="section-head">
        <span className="section-index">{step}</span>
        <div className="section-title-wrap">
          <h3>{title}</h3>
          {subtitle ? <p>{subtitle}</p> : null}
        </div>
        {aside ? <div className="section-head-aside">{aside}</div> : null}
      </header>
      <div className="section-body">{children}</div>
    </section>
  )
}