import React from 'react';
import { AbsoluteFill, OffthreadVideo, Audio, staticFile } from 'remotion';

interface VideoLayerProps {
  videoSrc: string;
  audioSrc?: string;
}

/**
 * 视频图层组件
 * 渲染底层视频和音频，视频自动循环以匹配音频长度
 */
export const VideoLayer: React.FC<VideoLayerProps> = ({
  videoSrc,
  audioSrc,
}) => {
  // 使用 staticFile 从 publicDir 加载视频
  const videoUrl = staticFile(videoSrc);

  return (
    <AbsoluteFill>
      <OffthreadVideo
        src={videoUrl}
        style={{
          width: '100%',
          height: '100%',
          objectFit: 'cover',
        }}
      />
      {audioSrc && <Audio src={staticFile(audioSrc)} />}
    </AbsoluteFill>
  );
};
