import React, { useState } from 'react'

export default function SectionBlock({
  step,
  title,
  subtitle,
  aside,
  children,
  collapsible = true,
  defaultOpen = true,
}) {
  const [open, setOpen] = useState(defaultOpen)

  return (
    <section
      className={`workflow-section${collapsible && !open ? ' is-collapsed' : ''}`}
      style={{ '--section-order': Number(step) || 1 }}
      data-section-step={String(step)}
    >
      <header className="section-head">
        <span className="section-index">{step}</span>
        <div className="section-title-wrap">
          <h3>{title}</h3>
          {subtitle ? <p>{subtitle}</p> : null}
        </div>
        <div className="section-head-actions">
          {aside ? <div className="section-head-aside">{aside}</div> : null}
          {collapsible ? (
            <button
              type="button"
              className={`section-collapse-toggle${open ? ' is-open' : ''}`}
              onClick={() => setOpen((current) => !current)}
              aria-expanded={open}
              title={open ? 'Recolher seção' : 'Expandir seção'}
            >
              <span className="section-collapse-toggle-icon" aria-hidden="true">▾</span>
            </button>
          ) : null}
        </div>
      </header>
      {!collapsible || open ? <div className="section-body">{children}</div> : null}
    </section>
  )
}