import styles from './index.module.scss';
import ContentFields from './ContentFields.js';
import cx from '../../utils/classname.js';
import { ListItemProps } from './types.js';

const ListItemComponent = ({
  children,
  className = '',
  style = {},
  ...rest
}: ListItemProps) => {
  const combinedClasses = cx(styles.listItem, className);

  return (
    <li className={combinedClasses} style={style} {...rest}>
      {children}
    </li>
  );
};

type ListItemComponentType = typeof ListItemComponent & {
  ContentFields: typeof ContentFields;
};

const ListItem = ListItemComponent as ListItemComponentType;
ListItem.ContentFields = ContentFields;

export default ListItem;
