// components/VideoPlayer.js
import React, { forwardRef } from "react";
type VideoPlayerProps = {
  url: string;
  onPlay?: () => void;
  onPause?: () => void;
};

const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
  ({ url, onPause, onPlay }, ref) => {
    return (
      <div className="video-player object-cover">
        <video
          ref={ref}
          controls
          preload="metadata"
          onPlay={onPlay}
          onPause={onPause}
        >
          <source src={url} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
        <style jsx>{`
          .video-player {
            max-width: 100%;
            margin: 0 auto;
          }
          video {
            width: 100%;
            height: auto;
          }
        `}</style>
      </div>
    );
  }
);

VideoPlayer.displayName = "VideoPlayer";

export default VideoPlayer;