/**
 * TransitionBlackOverlay Component
 *
 * Overlay for fade-through-color page transitions.
 * Must be rendered at a z-index ABOVE the elements layer to properly cover them.
 *
 * The fade-from-color effect:
 * 1. Page switches instantly (hidden by opaque overlay)
 * 2. Overlay fades out (1 → 0) revealing new page
 *
 * Used by both constructor.tsx and RuntimePresentation.tsx.
 */

import React from 'react';
import type { TransitionType } from '../types/transition';

interface TransitionBlackOverlayProps {
  /** Whether fade animation is in progress */
  isFadingIn: boolean;
  /** Transition type - only renders overlay for 'fade' type */
  transitionType?: TransitionType;
  /** Inline styles for transition duration/easing (from usePageNavigationState) */
  transitionStyle?: React.CSSProperties;
  /** Overlay color (default: #000000) */
  overlayColor?: string;
  /** Additional CSS classes */
  className?: string;
}

const TransitionBlackOverlay: React.FC<TransitionBlackOverlayProps> = ({
  isFadingIn,
  transitionType = 'fade',
  transitionStyle,
  overlayColor = '#000000',
  className = '',
}) => {
  // Only render overlay for fade transitions
  // 'none' means instant switch (no animation)
  // 'video' is handled by TransitionPreviewOverlay
  if (!isFadingIn || transitionType !== 'fade') return null;

  return (
    <div
      className={`pointer-events-none absolute inset-0 z-[100] animate-fade-from-black ${className}`}
      style={{
        ...transitionStyle,
        backgroundColor: overlayColor,
      }}
    />
  );
};

export default TransitionBlackOverlay;