import React from 'react';
import { AbsoluteFill, Composition } from 'remotion';
import { VideoLayer } from './components/VideoLayer';
import { Title } from './components/Title';
import { Subtitles } from './components/Subtitles';
import { CaptionsData } from './utils/captions';

export interface VideoProps {
  videoSrc: string;
  audioSrc?: string;
  captions?: CaptionsData;
  title?: string;
  titleDuration?: number;
  enableSubtitles?: boolean;
}

/**
 * 主视频组件
 * 组合视频层、标题层和字幕层
 */
export const Video: React.FC<VideoProps> = ({
  videoSrc,
  audioSrc,
  captions,
  title,
  titleDuration = 3,
  enableSubtitles = true,
}) => {
  return (
    <AbsoluteFill style={{ backgroundColor: 'black' }}>
      {/* 底层：视频 */}
      <VideoLayer videoSrc={videoSrc} audioSrc={audioSrc} />

      {/* 中层：字幕 */}
      {enableSubtitles && captions && (
        <Subtitles captions={captions} />
      )}

      {/* 顶层：标题 */}
      {title && (
        <Title title={title} duration={titleDuration} />
      )}
    </AbsoluteFill>
  );
};
