"use client";

import dynamic from "next/dynamic";
import { MutableRefObject } from "react";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const ReactPlayer = dynamic(() => import("react-player"), { ssr: false }) as any;

interface ReelsPlayerProps {
  url: string;
  isPlaying: boolean;
  muted: boolean;
  setProgress: (p: number) => void;
  videoRef: MutableRefObject<HTMLVideoElement | null>;
}

export function ReelsPlayer({
  url,
  isPlaying,
  muted,
  setProgress,
  videoRef,
}: ReelsPlayerProps) {
  return (
    <div className="relative w-full h-full overflow-hidden bg-black">
      <ReactPlayer
        src={url}
        playing={isPlaying}
        muted={muted}
        width="100%"
        height="100%"
        controls={false}
        progressInterval={100}
        config={{
          file: {
            forceVideo: true,
            forceHLS: url.includes(".m3u8"),
            forceDASH: url.includes(".mpd"),
            attributes: { playsInline: true, preload: "metadata" },
          },
        }}
        onTimeUpdate={(e: any) => {
          const video = e.target;
          videoRef.current = video;
          const progress = video.currentTime / video.duration;
          if (!isNaN(progress)) setProgress(progress);
        }}
      />
    </div>
  );
}