import { Composition } from "remotion";
import { ReonomyDemo } from "./ReonomyDemo";
import { ReonomyDemoExciting } from "./ReonomyDemoExciting";
import { ReonomyCanvasDemo } from "./ReonomyCanvasDemo";

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="ReonomyDemo"
        component={ReonomyDemo}
        durationInFrames={1590} // 53 seconds at 30fps
        fps={30}
        width={1920}
        height={1080}
      />
      <Composition
        id="ReonomyDemoExciting"
        component={ReonomyDemoExciting}
        durationInFrames={1340} // ~45 seconds at 30fps
        fps={30}
        width={1920}
        height={1080}
      />
      <Composition
        id="ReonomyCanvasDemo"
        component={ReonomyCanvasDemo}
        durationInFrames={1100} // ~37 seconds at 30fps
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};
