import {MassTableRow} from "@/components/MassTable/MassTableRow";
import {useMemo} from "react";
import styles from "./styles.module.css"
import {faustina} from "@/app/fonts";
import { Worship } from '@/payload-types'
import { useCompactDate } from '@/hooks/useCompactDate'

type MassTableProps = {
    date: string,
    masses: Worship[]
}

export const MassTable = ({date, masses}: MassTableProps) => {
    let dateObj = useMemo(() => new Date(date), [date]);
    let compactDate = useCompactDate(date);

    return (
        <div className={styles.table}>
            <h3 className={faustina.className}>{dateObj.toLocaleDateString("de-DE", {weekday: 'long'})} <small>{compactDate}</small></h3>

            { masses.map(mass =>
                <MassTableRow
                  key={mass.id}
                  id={mass.id}
                  locationName={typeof mass.location == "string" ? mass.location : mass.location.name}
                  date={mass.date}
                  type={mass.type}
                  cancelled={mass.cancelled}
                />
            )}
        </div>
        )
}