const TodoSettingsBlock = ( { todosData, className = '' } ) => {
	if ( todosData.length === 0 ) {
		return null;
	}

	return (
		<div
			className={ `ppcp-r-settings-block__todo ppcp-r-todo-items ${ className }` }
		>
			{ todosData.map( ( todo ) => (
				<TodoItem key={ todo.id } title={ todo.title } />
			) ) }
		</div>
	);
};

const TodoItem = ( props ) => {
	return (
		<div className="ppcp-r-todo-item">
			<div className="ppcp-r-todo-item__inner">
				<div className="ppcp-r-todo-item__icon"></div>
				<div className="ppcp-r-todo-item__description">
					{ props.title }
				</div>
			</div>
		</div>
	);
};

export default TodoSettingsBlock;