import { useCallback, useState } from 'react'

const POPUP_TEXT =
  'Music is streamed from YouTube so artists and rights holders get paid. ' +
  'This player is shown to comply with YouTube\'s Terms of Service.'

export function YouTubeAttribution({ children }: { children: React.ReactNode }) {
  const [show, setShow] = useState(false)

  const handleClick = useCallback(() => setShow(true), [])
  const handleClose = useCallback(() => setShow(false), [])

  return (
    <>
      {/* Wrap children in a clickable container */}
      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
      <div onClick={handleClick} style={{ cursor: 'pointer' }}>
        {children}
      </div>

      {show && (
        <div className="yt-attr-overlay" onClick={handleClose}>
          <div className="yt-attr-popup" onClick={(e) => e.stopPropagation()}>
            <p>{POPUP_TEXT}</p>
            <button className="yt-attr-close" onClick={handleClose}>Got it</button>
          </div>
        </div>
      )}
    </>
  )
}
