/**
 * TransitionPreviewOverlay Component
 *
 * Full-screen overlay for transition video preview.
 * Designed to work with useTransitionPlayback hook which manages
 * video src and playback externally via the videoRef.
 */

import React from 'react';

interface TransitionPreviewOverlayProps {
  /** Reference to the video element - useTransitionPlayback manages src and playback */
  videoRef: React.RefObject<HTMLVideoElement | null>;
  /** Whether the overlay is visible */
  isActive: boolean;
  /** Whether the video is currently buffering (used to hide video during load) */
  isBuffering?: boolean;
}

const TransitionPreviewOverlay: React.FC<TransitionPreviewOverlayProps> = ({
  videoRef,
  isActive,
  isBuffering = false,
}) => {
  if (!isActive) return null;

  return (
    <div className='fixed inset-0 z-50 overflow-hidden pointer-events-none'>
      <video
        ref={videoRef}
        className='absolute inset-0 h-full w-full object-cover transition-opacity duration-300 ease-linear'
        style={{ opacity: isBuffering ? 0 : 1 }}
        muted
        playsInline
        preload='auto'
        disablePictureInPicture
      />
    </div>
  );
};

export default TransitionPreviewOverlay;