import React, { ReactElement, ReactNode } from 'react';
import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Stack from '@mui/joy/Stack';
import { SxProps } from '@mui/joy/styles/types';

interface CollapsibleSectionProps {
  isOpen?: boolean;
  onToggle?: (isOpen: boolean) => void;
  prefix?: ReactNode;
  title: ReactNode;
  suffix?: ReactNode;
  children: ReactNode;
  className?: string;
  id?: string;
  sx?: SxProps;
  collapsible?: boolean;
}

const CollapsibleSection = React.memo(
  ({
    isOpen = true,
    onToggle,
    prefix,
    title,
    suffix,
    children,
    className,
    id,
    sx,
    collapsible = true,
  }: CollapsibleSectionProps): ReactElement => {
    return (
      <div id={id} className={className}>
        <Stack
          direction={'row'}
          justifyContent="flex-start"
          alignItems="center"
          spacing={1}
          sx={sx}
        >
          {prefix}
          
          {collapsible && (
            <FontAwesomeIcon
                icon={isOpen ? faCaretDown : faCaretRight}
                onClick={() => onToggle && onToggle(!isOpen)}
                style={{ cursor: 'pointer', width: '10px' }} 
            />
          )}

          {title}
          
          {suffix}
        </Stack>
        
        {isOpen && children}
      </div>
    );
  }
);

export default CollapsibleSection;