"use client"

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

interface VideoPlayerProps {
  src: string
  type?: string
}

export function VideoPlayer({ src, type = "video/mp4" }: VideoPlayerProps) {
  const videoRef = useRef<HTMLVideoElement>(null)
  const [progress, setProgress] = useState(0)

  useEffect(() => {
    const video = videoRef.current
    if (!video) return

    const updateProgress = () => {
      const percentage = (video.currentTime / video.duration) * 100
      setProgress(percentage)
    }

    video.addEventListener("timeupdate", updateProgress)
    return () => video.removeEventListener("timeupdate", updateProgress)
  }, [])

  return (
    <div className="relative h-[300px] lg:h-[350px] rounded-xl overflow-hidden">
      <video
        ref={videoRef}
        autoPlay
        loop
        muted
        playsInline
        className="w-full h-full object-cover"
      >
        <source src={src} type={type} />
        Your browser does not support the video tag.
      </video>

      {/* Circular Progress Indicator */}
      <div className="absolute bottom-4 right-4">
        <svg className="w-12 h-12 -rotate-90">
          <circle
            cx="24"
            cy="24"
            r="20"
            stroke="rgba(255, 255, 255, 0.3)"
            strokeWidth="3"
            fill="none"
          />
          <circle
            cx="24"
            cy="24"
            r="20"
            stroke="#55FF88"
            strokeWidth="3"
            fill="none"
            strokeDasharray={`${2 * Math.PI * 20}`}
            strokeDashoffset={`${2 * Math.PI * 20 * (1 - progress / 100)}`}
            strokeLinecap="round"
            style={{ transition: "stroke-dashoffset 0.1s linear" }}
          />
        </svg>
      </div>
    </div>
  )
}