'use client'

import { useState } from 'react'
import { IconPlay } from './Icons'

/**
 * YouTube-beágyazás lusta módon: amíg nem kattintanak,
 * csak egy háttérkép + gomb van — nulla külső kérés, nulla süti.
 * Az eredeti oldal minden videóhoz azonnal betöltötte a lejátszót.
 */
export default function VideoBlock({
  videoId,
  poster,
  label,
}: {
  videoId: string
  poster: string
  label: string
}) {
  const [playing, setPlaying] = useState(false)

  return (
    <div className="video-block" style={{ backgroundImage: `url(${poster})` }}>
      {playing ? (
        <iframe
          src={`https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1`}
          title={label}
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
        />
      ) : (
        <button
          type="button"
          className="play-button"
          onClick={() => setPlaying(true)}
          aria-label={`${label} — videó lejátszása`}
        >
          <IconPlay size={28} />
        </button>
      )}
    </div>
  )
}