import React from 'react';
import { Composition } from 'remotion';
import { Stage } from './Stage';
import { WORLDS } from './themes';
import { IosIconsFg } from './scenes/ios-icons';
import { WindowsFg } from './scenes/windows';
import { AndroidFg } from './scenes/android';
import { WebtoolsFg } from './scenes/webtools';
import { ShopFg } from './scenes/shop';
import { HostingFg } from './scenes/hosting';
import { NewsFg } from './scenes/news';
import { IthilfeFg } from './scenes/it-hilfe';
import { WebdesignFg } from './scenes/webdesign';

const FOREGROUNDS: Record<string, React.FC<{ accent: string; accent2: string }>> = {
  ios: IosIconsFg,
  windows: WindowsFg,
  android: AndroidFg,
  webtools: WebtoolsFg,
  shop: ShopFg,
  hosting: HostingFg,
  news: NewsFg,
  'it-hilfe': IthilfeFg,
  webdesign: WebdesignFg,
};

const WorldVideo: React.FC<{ world: string }> = ({ world }) => {
  const w = WORLDS[world];
  const Fg = FOREGROUNDS[world];
  return (
    <Stage accent={w.accent} accent2={w.accent2} bgTop={w.bgTop} bgBottom={w.bgBottom}>
      <Fg accent={w.accent} accent2={w.accent2} />
    </Stage>
  );
};

// 8-second seamless loops @ 30fps, 1080p — one full-bleed background per world.
export const RemotionRoot: React.FC = () => {
  return (
    <>
      {Object.keys(FOREGROUNDS).map((world) => (
        <Composition
          key={world}
          id={world}
          component={WorldVideo}
          durationInFrames={240}
          fps={30}
          width={1920}
          height={1080}
          defaultProps={{ world }}
        />
      ))}
    </>
  );
};