import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

export function CollapsiblePanel({ title, children }: { title?: string, children: JSX.Element }) {
    return <Accordion sx={{backgroundColor:"transparent"}}>
        <AccordionSummary 
          expandIcon={<ExpandMoreIcon />}
        >
            <Typography component="span">{title || ""}</Typography>
        </AccordionSummary>
        <AccordionDetails>
            {children}
        </AccordionDetails>
    </Accordion>
}