import { $html, $each, $alias } from "ekma";
import Header from "./Header";
import * as API from "./API";

export default (header: Header) => {
	const calendar = header.parent;
	const now = API.monthNumberToMoment(calendar.state.now);

	return $html`
		<div class="controls">
			<a href="#" class="left" aria-controls="month"></a>
			<div id="month" class="now">${ now.format("MMMM, YYYY") }</div>
			<a href="#" class="right" aria-controls="month"></a>
		</div>

		<div class="headings">
			${ $each(calendar.headings, heading => $html`
				<div class="heading">${ heading }</div>
			`) }
		</div>
	`;
};