const FALLBACK = {
	0: 'Sunday', 1: 'Monday', 2: 'Tuesday', 3: 'Wednesday',
	4: 'Thursday', 5: 'Friday', 6: 'Saturday',
};

export default function DayPills( { days, active, onToggle, fullNames = FALLBACK } ) {
	const activeList = active || [];
	return (
		<div className="edfw-daypills" role="group">
			{ Object.entries( days ).map( ( [ key, short ] ) => {
				const dayInt = Number( key );
				const on = activeList.includes( dayInt );
				return (
					<button
						key={ key }
						type="button"
						role="switch"
						aria-checked={ on }
						aria-label={ fullNames[ dayInt ] }
						className={ `edfw-pill ${ on ? 'is-active' : '' }` }
						onClick={ () => onToggle( dayInt ) }
					>
						{ short }
					</button>
				);
			} ) }
		</div>
	);
}
