import styles from './massTimerTooltip.module.css'
import clara from './clara.svg'
import Image from 'next/image'
import { Worship } from '@/payload-types'
import { useTime } from '@/hooks/useTime'
import { useLocationName } from '@/hooks/useLocationName'
import { useCompactDate } from '@/hooks/useCompactDate'

type MassTimerTooltipProps = {
  nextMass: Worship
}

export const MassTimerTooltip = ({ nextMass }: MassTimerTooltipProps) => {
  const time = useTime(nextMass.date)
  const location = useLocationName(nextMass.location)
  const date = useCompactDate(nextMass.date)

  return (
    <div className={styles.tooltip}>
      <div className={styles.church}>
        <Image src={clara} width={75} height={75} alt={''} />
      </div>

      <div>
        Die nächste Messe is am {date} um {time} Uhr in {location}.
      </div>
    </div>
  )
}
