import React from 'react';
import { Composition } from 'remotion';
import { Video, VideoProps } from './Video';

/**
 * Remotion 根组件
 * 定义视频合成配置
 */
export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="ViGentVideo"
        component={Video}
        durationInFrames={300} // 默认值，会被 render.ts 覆盖
        fps={25}
        width={1080}
        height={1920}
        calculateMetadata={async ({ props }: { props: Record<string, unknown> }) => ({
          width: (props.width as number) || 1080,
          height: (props.height as number) || 1920,
        })}
        defaultProps={{
          videoSrc: '',
          audioSrc: undefined,
          captions: undefined,
          title: undefined,
          secondaryTitle: undefined,
          titleDuration: 4,
          titleDisplayMode: 'short',
          enableSubtitles: true,
          secondaryTitleStyle: undefined,
          width: 1080,
          height: 1920,
        } satisfies VideoProps}
      />
    </>
  );
};
