import classNames from 'classnames'
import { faustina } from '@/app/fonts'
import styles from './styles.module.css'
import { Pill } from '@/components/Pill/Pill'

type MassTitleProps = {
  title: string
  cancelled: boolean
}

export const MassTitle = ({ title, cancelled }: MassTitleProps) => {
  return (
    <div>
      <div className={styles.mass}>
        Gottesdienst {cancelled && <Pill>ABGESAGT</Pill>}
      </div>
      <h1
        className={classNames(faustina.className, styles.title, {
          [styles.cancelled]: cancelled,
        })}
      >
        {title}
      </h1>
    </div>
  )
}
