import { forwardRef } from "react";

interface VideoPlayerProps {
  src?: string;
  poster?: string;
  className?: string;
  /** Seek to this many seconds after metadata loads (broadcast sync on refresh). */
  initialOffset?: number;
}

const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
  ({ src, poster, className, initialOffset }, ref) => {
    return (
      <div className={`relative h-full w-full bg-black ${className ?? ""}`}>
        <video
          ref={ref}
          src={src}
          poster={poster}
          autoPlay
          playsInline
          onLoadedMetadata={(e) => {
            if (initialOffset && initialOffset > 0) {
              e.currentTarget.currentTime = initialOffset;
            }
          }}
          className="h-full w-full object-contain"
        />
      </div>
    );
  }
);

VideoPlayer.displayName = "VideoPlayer";

export { VideoPlayer };
export type { VideoPlayerProps };