import React from 'react';
import { Divider, Icon, IconButton } from 'rsuite';

export default function SelectedDates({ possibleDates, handleDelete }) {
	return (
		<ul>
			{possibleDates.map((date) => (
				<li key={date.start}>
					{date.start}
					<Divider vertical />
					<IconButton
						icon={<Icon icon='close' />}
						appearance='subtle'
						circle
						onClick={() => handleDelete(date)}
					></IconButton>
				</li>
			))}
		</ul>
	);
}