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

const ListComponent = ({
  listType = 'unordered',
  gap = '0px',
  showMarker = true,
  className = '',
  style = {},
  children,
  ...rest
}: ListProps) => {
  const ListTag = listType === 'ordered' ? 'ol' : 'ul';
  const defaultClasses = cx(styles.list, {
    [styles.noMarker]: !showMarker,
  });
  const combinedClasses = cx(defaultClasses, className);

  return (
    <Flex
      as={ListTag}
      direction="column"
      gap={gap}
      className={combinedClasses}
      style={style}
      {...rest}
    >
      {children}
    </Flex>
  );
};

type ListComponentType = typeof ListComponent & {
  ContentFields: typeof ContentFields;
};

const List = ListComponent as ListComponentType;
List.ContentFields = ContentFields;

export default List;
export { ListItem };
