import React, { FC, useState } from 'react'
import { Collapse } from './Collapse'

export declare interface ExpandableInfoSectionProps {
  sectionTitle: React.ReactNode
  detailsText?: React.ReactNode
  detailsClassNames?: string
  id: string
}

export const ExpandableInfoSection: FC<ExpandableInfoSectionProps> = ({
  sectionTitle,
  detailsText,
  detailsClassNames,
  id,
}) => {
  const [open, setOpen] = useState(false)

  return (
    <>
      <div className="flex align-ic maxs text-strip">
        <button
          type="button"
          aria-expanded={open}
          aria-controls={id}
          className="icon-bg flex align-ic gas"
          onClick={event => {
            event.preventDefault()
            setOpen(!open)
          }}
        >
          <span className="icon" aria-hidden="true">
            ?
          </span>
          {sectionTitle}
        </button>
      </div>
      <Collapse isOpen={open}>
        <div
          className={`${detailsClassNames ? detailsClassNames : ''}`}
          id={id}
        >
          {detailsText}
        </div>
      </Collapse>
    </>
  )
}