"use client";
 
import { useState, useRef, useEffect } from "react";
import { Play, Pause, Volume2, VolumeX } from "lucide-react";
 
interface HeroVideoBackgroundProps {
  videoUrl?: string;
  title: string;
  description: string;
  primaryCTA?: {
    text: string;
    href: string;
  };
  secondaryCTA?: {
    text: string;
    href: string;
  };
  showControls?: boolean;
  overlayOpacity?: number;
  className?: string;
}
 
export function HeroVideoBackground({
  videoUrl = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
  title,
  description,
  primaryCTA,
  secondaryCTA,
  showControls = true,
  overlayOpacity = 0.6,
  className = "",
}: HeroVideoBackgroundProps) {
  const [isPlaying, setIsPlaying] = useState(true);
  const [isMuted, setIsMuted] = useState(true);
  const videoRef = useRef<HTMLVideoElement>(null);
 
  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.play().catch(() => {
        setIsPlaying(false);
      });
    }
  }, []);
 
  const togglePlay = () => {
    if (videoRef.current) {
      if (isPlaying) {
        videoRef.current.pause();
      } else {
        videoRef.current.play();
      }
      setIsPlaying(!isPlaying);
    }
  };
 
  const toggleMute = () => {
    if (videoRef.current) {
      videoRef.current.muted = !isMuted;
      setIsMuted(!isMuted);
    }
  };
 
  return (
    <section
      className={`relative flex min-h-screen items-center justify-center rounded overflow-hidden ${className}`}
    >
      <video
        ref={videoRef}
        autoPlay
        loop
        muted
        playsInline
        className="absolute inset-0 h-full w-full object-cover"
      >
        <source src={videoUrl} type="video/mp4" />
      </video>
 
      <div
        className="absolute inset-0 bg-black"
        style={{ opacity: overlayOpacity }}
      />
 
      <div className="relative z-10 mx-auto max-w-5xl px-4 text-center sm:px-6 lg:px-8">
        <h1 className="mb-6 text-5xl font-bold leading-tight text-white sm:text-6xl lg:text-7xl">
          {title}
        </h1>
        <p className="mb-10 text-xl text-zinc-300 sm:text-2xl lg:text-3xl">
          {description}
        </p>
 
        {(primaryCTA || secondaryCTA) && (
          <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
            {primaryCTA && (
              <a
                href={primaryCTA.href}
                className="inline-flex items-center gap-2 rounded-lg bg-orange-600 px-8 py-4 text-lg font-semibold text-white transition-all hover:bg-orange-700 hover:scale-105"
              >
                {primaryCTA.text}
              </a>
            )}
            {secondaryCTA && (
              <a
                href={secondaryCTA.href}
                className="inline-flex items-center gap-2 rounded-lg border-2 border-white bg-white/10 px-8 py-4 text-lg font-semibold text-white backdrop-blur-sm transition-all hover:bg-white/20 hover:scale-105"
              >
                {secondaryCTA.text}
              </a>
            )}
          </div>
        )}
      </div>
 
      {showControls && (
        <div className="absolute bottom-8 right-8 z-20 flex gap-2">
          <button
            onClick={togglePlay}
            className="rounded-lg bg-black/50 p-3 text-white backdrop-blur-sm transition-all hover:bg-black/70"
            aria-label={isPlaying ? "Pause video" : "Play video"}
          >
            {isPlaying ? (
              <Pause className="h-5 w-5" />
            ) : (
              <Play className="h-5 w-5" />
            )}
          </button>
          <button
            onClick={toggleMute}
            className="rounded-lg bg-black/50 p-3 text-white backdrop-blur-sm transition-all hover:bg-black/70"
            aria-label={isMuted ? "Unmute video" : "Mute video"}
          >
            {isMuted ? (
              <VolumeX className="h-5 w-5" />
            ) : (
              <Volume2 className="h-5 w-5" />
            )}
          </button>
        </div>
      )}
 
      <div className="absolute bottom-8 left-1/2 z-10 -translate-x-1/2 animate-bounce">
        <div className="flex h-12 w-8 items-start justify-center rounded-full border-2 border-white/50 p-2">
          <div className="h-2 w-1 animate-pulse rounded-full bg-white" />
        </div>
      </div>
    </section>
  );
}