import { type FC } from 'react';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuCircularProgress from '@material-hu/components/design-system/ProgressIndicators/Spinner';

type Props = {
  children: React.ReactNode;
  isLoading?: boolean;
};

const customStyles = {
  '& .MuiCardContent-root': { p: 0 },
};

export const CollapsibleSection: FC<Props> = ({ children, isLoading }) => {
  return (
    <HuCardContainer sx={{ width: '100%', mt: 3, ...customStyles }}>
      {children}
      {isLoading && <HuCircularProgress centered />}
    </HuCardContainer>
  );
};

export default CollapsibleSection;