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

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

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

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

    if (icon === 'caret') return <CaretIcon />;

    return null;
  };

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

export default AccordionTitleBase;
