// ─── Video Section ────────────────────────────────────────────────────────────

import { useState, useRef, useEffect } from "react";

const VideoSection = ({ videoData }: any) => {
  console.log('Video', videoData)
  const [playing, setPlaying] = useState(false);
  const videoRef = useRef<HTMLVideoElement>(null);

  const toggle = () => {
    if (!videoRef.current) return;
    
    try {
      if (playing) {
        videoRef.current.pause();
        setPlaying(false);
      } else {
        const playPromise = videoRef.current.play();
        if (playPromise !== undefined) {
          playPromise
            .then(() => {
              setPlaying(true);
            })
            .catch((error: any) => {
              console.error("Playback failed:", error);
              setPlaying(false);
            });
        }
      }
    } catch (error) {
      console.error("Video toggle error:", error);
    }
  };

  const handleVideoError = (e: any) => {
    console.error("Video loading error:", e);
  };

  // Get video URL from videoData
  const videoUrl = videoData?.video_url || "/images/wedding.mp4";

  return (
    <section className="py-12">
      <div className="container container-xxl px-3 mb-6 text-center">
        <h2 className="font-cormorant text-3xl md:text-4xl font-semibold tracking-wide">In the Spotlight</h2>
        <div className="mt-2 h-px w-16 bg-amber-400 mx-auto" />
      </div>
      <div className="relative overflow-hidden">
        <video
          ref={videoRef}
          muted
          playsInline
          poster="images/video-poster.jpg"
          className="w-full max-h-[480px] object-cover"
          onPlay={() => setPlaying(true)}
          onPause={() => setPlaying(false)}
          onError={handleVideoError}
        >
          <source src={videoUrl} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
        <div className="absolute inset-0 bg-black/40 flex flex-col items-center justify-center gap-6">
          <button
            onClick={toggle}
            className="w-16 h-16 rounded-full border-2 border-white text-white flex items-center justify-center hover:bg-white hover:text-[#30232a] transition-all z-10"
            aria-label={playing ? "Pause" : "Play"}
          >
            {playing ? (
              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
              </svg>
            ) : (
              <svg className="w-6 h-6 ml-1" fill="currentColor" viewBox="0 0 24 24">
                <path d="M8 5v14l11-7z"/>
              </svg>
            )}
          </button>
          <h2 className="font-cormorant text-white text-center px-4 flex flex-col gap-2">
            <span className="text-xl md:text-2xl">{videoData?.title}</span>
            <span className="text-2xl md:text-3xl">{videoData?.subtitle}</span>
          </h2>
        </div>
      </div>
    </section>
  );
};

export default VideoSection;