import {useContentImpression} from '../../internal/useContentImpression'
import {useShopActions} from '../../internal/useShopActions'

import {LongPressDetector} from './long-press-detector'

export function ContentMonitor({
  publicId,
  children,
}: {
  publicId?: string
  children: React.ReactNode
}) {
  const {showFeedbackSheet} = useShopActions()
  const {ref} = useContentImpression({
    publicId: publicId ?? '',
    skip: !publicId,
  })

  return (
    <div ref={ref}>
      <LongPressDetector
        onLongPress={() => {
          if (!publicId) return

          showFeedbackSheet({publicId})
        }}
      >
        {children}
      </LongPressDetector>
    </div>
  )
}