import React from 'react';
import { Composition } from 'remotion';
import { SlackScreen } from './SlackScreen';
import {
  PLUS_ONE_SLACK_MESSAGES,
  PLUS_ONE_SLACK_TIMELINE,
  PLUS_ONE_SLACK_TOTAL_FRAMES,
  PLUS_ONE_SLACK_FPS,
} from './data/plus-one-slack';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      {/* Plus One Naming — Vertical (Stories/Reels/TikTok) */}
      <Composition
        id="plus-one-slack-stories"
        component={SlackScreen}
        durationInFrames={PLUS_ONE_SLACK_TOTAL_FRAMES}
        fps={PLUS_ONE_SLACK_FPS}
        width={1080}
        height={1920}
        defaultProps={{
          messages: PLUS_ONE_SLACK_MESSAGES,
          timeline: PLUS_ONE_SLACK_TIMELINE,
          layout: 'portrait',
        }}
      />

      {/* Plus One Naming — Horizontal (YouTube/Blog/Newsletter) */}
      <Composition
        id="plus-one-slack-landscape"
        component={SlackScreen}
        durationInFrames={PLUS_ONE_SLACK_TOTAL_FRAMES}
        fps={PLUS_ONE_SLACK_FPS}
        width={1920}
        height={1080}
        defaultProps={{
          messages: PLUS_ONE_SLACK_MESSAGES,
          timeline: PLUS_ONE_SLACK_TIMELINE,
          layout: 'landscape',
        }}
      />
    </>
  );
};