import React from "react";
import { dateToString } from "@ax/helpers";

import * as S from "./style";

const ItemGroup = (props: IItemGroupProps) => {
	const { date, children, count } = props;
	const dateTitle = dateToString(new Date(date), "MMM d yyyy");

	return (
		<S.Wrapper>
			<S.Header>
				<S.DateWrapper>{dateTitle}</S.DateWrapper>
				<S.CounterWrapper>{count} events</S.CounterWrapper>
			</S.Header>
			<S.ItemList>{children}</S.ItemList>
		</S.Wrapper>
	);
};

interface IItemGroupProps {
	children: JSX.Element[];
	date: string;
	count: number;
}

export default ItemGroup;
