import sortBy from "../../../../utils/sorting/sortBy.js";
import { useMemo } from 'react';
import BodyItem from './BodyItem';
import styles from './styles.module.scss';
export default function CardBody({
  dayGroups,
  conventionNotes,
  namedElex,
  tracking
}) {
  const sortedData = useMemo(() => {
    const dataSorter = ([date]) => new Date(date);
    return sortBy(dayGroups, [dataSorter]);
  }, [dayGroups]);
  if (sortedData.length === 0) {
    return <p className={styles['no-elections']}>
        There are no elections this month.
      </p>;
  }
  return sortedData.map(([date, data]) => <BodyItem key={date} date={date} data={data} conventionNotes={conventionNotes} namedElex={namedElex} tracking={tracking} />);
}