'use client'

import { useEffect } from 'react'

/**
 * Érintős eszközön koppintásra villantja fel a szolgáltatói kártya
 * színátmenetét. Egeres gépen nem csinál semmit — ott a hover dolgozik.
 *
 * Az adat magától látszik érintőn (CSS), ez csak az effektet kapcsolja,
 * ezért a kártyán belüli linkek működése változatlan marad.
 */
export default function TeamCardTouch() {
  useEffect(() => {
    if (window.matchMedia('(hover: hover)').matches) return

    let timer: ReturnType<typeof setTimeout> | undefined

    const clear = () =>
      document.querySelectorAll('.team-member.is-tapped').forEach((el) => el.classList.remove('is-tapped'))

    const onDown = (e: PointerEvent) => {
      const card = (e.target as Element | null)?.closest?.('.team-member')
      clear()
      if (!card) return
      card.classList.add('is-tapped')
      clearTimeout(timer)
      // rövid koppintásnál is maradjon látható egy pillanatig
      timer = setTimeout(() => card.classList.remove('is-tapped'), 2200)
    }

    document.addEventListener('pointerdown', onDown)
    return () => {
      document.removeEventListener('pointerdown', onDown)
      clearTimeout(timer)
      clear()
    }
  }, [])

  return null
}