import styles from './index.module.scss';
import ContentFields from './ContentFields.js';
import cx from '../../utils/classname.js';
import { AccordionTitleProps } from './types.js';
import { ChevronIcon, PlusIcon, MinusIcon } from './icons.js';

const AccordionTitleComponent = ({
  icon = 'chevron',
  className = '',
  style = {},
  children,
}: AccordionTitleProps) => {
  const combinedClasses = cx(styles.accordionTitle, className);

  const renderIcon = () => {
    if (icon === 'chevron') return <ChevronIcon />;

    if (icon === 'plus') {
      return (
        <>
          <PlusIcon />
          <MinusIcon />
        </>
      );
    }

    return null;
  };

  return (
    <summary className={combinedClasses} style={style}>
      <span className={styles.accordionTitleText}>{children}</span>
      {renderIcon()}
    </summary>
  );
};

type AccordionTitleComponentType = typeof AccordionTitleComponent & {
  ContentFields: typeof ContentFields;
};

const AccordionTitle = AccordionTitleComponent as AccordionTitleComponentType;
AccordionTitle.ContentFields = ContentFields;

export default AccordionTitle;
