import { Composition } from "remotion";
import {
  HeartyAd,
  CLIPS_V1,
  CLIPS_V2,
  CLIPS_V3,
  CLIPS_V4,
} from "./HeartyAd";

const FPS = 30;
const DURATION = 21 * FPS;

const CLIP_VARIANTS = [
  { id: "v1", clips: CLIPS_V1 },
  { id: "v2", clips: CLIPS_V2 },
  { id: "v3", clips: CLIPS_V3 },
  { id: "v4", clips: CLIPS_V4 },
];

const LANGUAGES = ["en", "fr", "es", "it", "pt", "de"];

const ASPECT_RATIOS = [
  { suffix: "9x16", width: 1080, height: 1920 },
  { suffix: "4x5", width: 1080, height: 1350 },
];

export const RemotionRoot: React.FC = () => {
  return (
    <>
      {/* Every variant × every language × every aspect ratio */}
      {CLIP_VARIANTS.map(({ id, clips }) =>
        LANGUAGES.map((lang) =>
          ASPECT_RATIOS.map(({ suffix, width, height }) => (
            <Composition
              key={`${id}-${lang}-${suffix}`}
              id={`HeartyAd-${id}-${lang}-${suffix}`}
              component={HeartyAd}
              durationInFrames={DURATION}
              fps={FPS}
              width={width}
              height={height}
              defaultProps={{ clips, lang }}
            />
          ))
        )
      )}
    </>
  );
};
