import React, { useState } from "react"
import accordionStyles from "./accordion.module.css"

export default ({ title, initial, children }) => {
  const [open, setOpen] = useState(initial)

  return (
    <>
      <div
        className={accordionStyles.header}
        onClick={() => setOpen(open => !open)}
      >
        <span>{title}</span>
        <span>{open ? "∨" : "∧"}</span>
      </div>
      {open ? <div className={accordionStyles.content}>{children}</div> : null}
    </>
  )
}