accordion

import React from 'react'
import { useState } from 'react'
import {
  Box,
  AccordionSummary as MuiAccordionSummary,
  Accordion as MuiAccordion
} from '@mui/material'
import { HeaderBody } from "./typography";

import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import { makeStyles } from '@mui/styles'

const useStyles = makeStyles({
  root: {
    width: '100%',
    minHeight: 'auto'
  },
  heading: {
    flexBasis: '33.33%',
    flexShrink: 0,
    minHeight: 'auto',
    textTransform: 'uppercase'
  }
})

export function Accordions({ collection = [], defaultExpanded = true }) {
  const classes = useStyles()
  const [expanded, setExpanded] = useState(defaultExpanded)
  const handleChange = panel => (event, isExpanded) =>
    setExpanded(isExpanded ? panel : false)

  return (
    <Box className={classes.root}>
      {collection.map((accordian, index) => {
        const { label, PresentationItem } = accordian

        return (
          <MuiAccordion
            key={`${index}-${label}`}
            TransitionProps={{ unmountOnExit: true }}
            expanded={expanded === label}
            onChange={handleChange(label)}
          >
            <MuiAccordionSummary
              expandIcon={<ExpandMoreIcon />}
              aria-controls="panel1bh-content"
              id="panel1bh-header"
            >
              <HeaderBody>{label}</HeaderBody>
            </MuiAccordionSummary>
            <Box width="100%" overflow="scroll" p={1}>
              <PresentationItem />
            </Box>
          </MuiAccordion>
        )
      })}
    </Box>
  )
}