'use client'

import { useCountdown } from '@/components/archive/MassTimer/useCountdown'
import styles from './masstimer.module.css'
import { useState } from 'react'
import { MassTimerTooltip } from '@/components/archive/MassTimerTooltip/MassTimerTooltip'
import { Worship } from '@/payload-types'

type MassTimerProps = {
  nextMass: Worship

  /**
   * Optional click handler
   */
  onStarClick?: () => void
}

export const MassTimer = ({ nextMass, onStarClick }: MassTimerProps) => {
  const [displayTooltip, setDisplayTooltip] = useState<boolean>(false)
  const [days, hours, minutes, seconds] = useCountdown(
    new Date(nextMass.date).getTime(),
  )

  return (
    <div className={styles.container}>
      <div>
        <button
          className={styles.starButton}
          type={'button'}
          onClick={onStarClick}
        >
          🌟
        </button>

        <span
          onMouseEnter={() => setDisplayTooltip(true)}
          suppressHydrationWarning={true}
        >
          {days}T {hours}S {minutes}M {seconds}S
        </span>
      </div>

      <div
        className={styles.tooltip}
        style={{
          visibility: displayTooltip ? 'visible' : 'hidden',
          opacity: displayTooltip ? 1 : 0,
          transition: 'ease-out 0.2s',
        }}
        onMouseLeave={() => setDisplayTooltip(false)}
      >
        <MassTimerTooltip nextMass={nextMass} />
      </div>
    </div>
  )
}
