import { MassTableRow } from '@/components/MassTable/MassTableRow'
import styles from './styles.module.scss'
import { Worship } from '@/payload-types'
import { ChurchCard } from '@/components/ChurchCard/ChurchCard'
import { church } from '@/utils/church'
import classNames from 'classnames'

type MassTableProps = {
  location: string
  masses: Worship[]
}

export const MassTable = ({ location, masses }: MassTableProps) => {

  return (
    <div className={styles.table}>
      <div className={classNames(styles.location)}>
        {location}
      </div>

      <div>
        <ChurchCard church={church(location)} backgroundColor={"#ffffff"} width={200} />
      </div>

      <div>
        {masses.map((mass) => (
          <MassTableRow
            key={mass.id}
            id={mass.id}
            date={mass.date}
            type={mass.type}
            cancelled={mass.cancelled}
          />
        ))}
      </div>

    </div>
  )
}
