import React from 'react';
import cx from 'classnames';
import styled from '@emotion/styled';
import style from './List.module.scss';
import colors from '../../theme/base';

const StyledOrderedList = styled.ol((props) => {
  return {
    color: props.theme.colors?.[props.color] || colors[props.color] || colors['Dark Neutral 1'],
  };
});

const StyledUnorderedList = styled.ul((props) => {
  return {
    color: props.theme.colors?.[props.color] || colors[props.color] || colors['Dark Neutral 1'],
  };
});

const List = ({ type = 'ordered', color = 'Dark Neutral 1', className, children, ...rest }) => {
  const ListComponent = type === 'ordered' ? StyledOrderedList : StyledUnorderedList;

  return (
    <ListComponent className={cx(style.list, className)} color={color} {...rest}>
      {children}
    </ListComponent>
  );
};

export default List;