import { pxToRem, arrayToClassName } from 'elementor-app/utils/utils.js';
import ListItem from './list-item';

import './list.scss';

export default function List( props ) {
	const baseClassName = 'eps-list',
		classes = [	baseClassName, props.className ];

	let style;

	if ( Object.prototype.hasOwnProperty.call( props, 'padding' ) ) {
		style = {
			'--eps-list-padding': pxToRem( props.padding ),
		};

		classes.push( baseClassName + '--padding' );
	}

	if ( props.separated ) {
		classes.push( baseClassName + '--separated' );
	}

	return (
		<ul style={ style } className={ arrayToClassName( classes ) }>
			{ props.children }
		</ul>
	);
}

List.propTypes = {
	className: PropTypes.string,
	divided: PropTypes.any,
	separated: PropTypes.any,
	padding: PropTypes.string,
	children: PropTypes.oneOfType( [
		PropTypes.object,
		PropTypes.arrayOf( PropTypes.object ),
	] ).isRequired,
};

List.defaultProps = {
	className: '',
};

List.Item = ListItem;