'use client'
import { useState } from 'react'
import { motion } from 'framer-motion'
import { Play } from 'lucide-react'
import Image from 'next/image'

interface VideoPlayerProps {
  posterImage: string
  videoUrl: string
  title: string
  className?: string
}

export function VideoPlayer({ posterImage, videoUrl, title, className = '' }: VideoPlayerProps) {
  const [isPlaying, setIsPlaying] = useState(false)

  const handlePlay = () => {
    setIsPlaying(true)
  }

  return (
    <div className={`onepage-media ${className}`}>
      {!isPlaying ? (
        <>
          <Image 
            src={posterImage}
            alt={title}
            fill
            className="object-cover"
          />
          <motion.div 
            className="onepage-play-overlay"
            whileHover={{ backgroundColor: 'rgba(0,0,0,0.3)' }}
            transition={{ duration: 0.3 }}
            onClick={handlePlay}
          >
            <motion.div 
              className="onepage-play-btn"
              whileHover={{ scale: 1.2 }}
              whileTap={{ scale: 0.9 }}
              animate={{ 
                boxShadow: [
                  '0 0 0 0 rgba(122,92,255,0.15)',
                  '0 0 0 20px rgba(122,92,255,0)',
                  '0 0 0 0 rgba(122,92,255,0)'
                ]
              }}
              transition={{ 
                duration: 2,
                repeat: Infinity,
                ease: "easeInOut"
              }}
            >
              <Play className="w-6 h-6"/> Play {title}
            </motion.div>
          </motion.div>
        </>
      ) : (
        <iframe
          src={videoUrl}
          title={title}
          className="w-full h-full"
          style={{ 
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            border: 'none'
          }}
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
        />
      )}
    </div>
  )
}