/**
 * TransitionScene Component
 *
 * "Your Matches" header slide-in transition.
 * Duration: ~2s
 */

import React from 'react';
import { interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';
import { darkPalette } from '../lib/colors';
import type { TransitionScene as TransitionSceneType } from '../types/video-script';

type TransitionSceneProps = {
  scene: TransitionSceneType;
};

export const TransitionScene: React.FC<TransitionSceneProps> = ({ scene }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Header slide in from left
  const slideProgress = spring({
    frame,
    fps,
    config: { damping: 18, stiffness: 80 },
  });

  const translateX = interpolate(slideProgress, [0, 1], [-100, 0]);
  const opacity = interpolate(slideProgress, [0, 1], [0, 1]);

  // Underline grows
  const lineWidth = interpolate(slideProgress, [0, 1], [0, 100]);

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: darkPalette.background,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 60,
      }}
    >
      {/* Header text */}
      <h1
        style={{
          color: darkPalette.text,
          fontSize: 56,
          fontWeight: 700,
          transform: `translateX(${translateX}px)`,
          opacity,
          marginBottom: 20,
        }}
      >
        {scene.text}
      </h1>

      {/* Accent underline */}
      <div
        style={{
          height: 6,
          width: `${lineWidth}%`,
          maxWidth: 300,
          backgroundColor: darkPalette.accent,
          borderRadius: 3,
          opacity,
        }}
      />
    </div>
  );
};
