/**
 * AdVideo — ad composition with optional background music.
 *
 * Formats:
 *   AdFeed  — 1080×1080 (Instagram/LinkedIn square)
 *   AdReels — 1080×1920 (Reels/Shorts/Stories vertical)
 *
 * Slide count is dynamic (5-7 slides from Claude). Duration = slides.length × 90 frames.
 */

import React from 'react';
import { AbsoluteFill, Sequence } from 'remotion';
import { Slide } from './Slide';
import type { SlideData } from './Slide';
import { BackgroundMusic } from './BackgroundMusic';
import type { AudioConfig } from '../renderer';

export interface AdVideoProps {
  slides: SlideData[];
  format: 'feed' | 'reels';
  audio?: AudioConfig;
}

const FRAMES_PER_SLIDE = 90; // 3 seconds at 30fps

export const AdVideo: React.FC<AdVideoProps> = ({ slides, audio }) => {
  return (
    <AbsoluteFill
      style={{
        background: 'linear-gradient(135deg, #0f172a 0%, #1e293b 100%)',
      }}
    >
      {slides.map((slide, i) => (
        <Sequence key={i} from={i * FRAMES_PER_SLIDE} durationInFrames={FRAMES_PER_SLIDE}>
          <Slide slide={slide} />
        </Sequence>
      ))}
      {audio && <BackgroundMusic audio={audio} />}
    </AbsoluteFill>
  );
};