import * as MaterialIcons from "@mui/icons-material";
import { AccordionDetails, AccordionSummary, Accordion as MuiAccordion, AccordionProps as MuiAccordionProps, Typography } from "@mui/material";
import React from "react";
import './accordion.scss';





export interface AccordionProps extends MuiAccordionProps {
  title: string,
  icon?: React.ReactNode,
  elevation?: number
}

export const Accordion = ({ icon, title, children, expanded, disabled, variant, square, elevation, ...rest }: AccordionProps) => {

  function getMaterialUIIconComponentByName(icon: string) {
    const formattedIconName = icon
      .split('_')
      .map((word: any) => word.charAt(0).toUpperCase() + word.slice(1))
      .join('');
    const iconComponentName = `${formattedIconName}` as keyof typeof MaterialIcons;
    const IconComponent = MaterialIcons[iconComponentName];
    return IconComponent || MaterialIcons.ErrorOutline;
  }

  return (
    <div className="accordion-container">
      <MuiAccordion elevation={elevation} expanded={expanded} disabled={disabled}
        variant={variant} square={square} >
        <AccordionSummary
          expandIcon={<MaterialIcons.ExpandMore />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          {icon  && (<div className="icon-alignment">
            {icon}
          </div>)}

          <Typography>{title}</Typography>

        </AccordionSummary>

        <AccordionDetails >
          <Typography>
            {children}
          </Typography>
        </AccordionDetails>
      </MuiAccordion>
    </div>

  );

}