import { AbsoluteFill, Sequence, useVideoConfig } from "remotion";
import { WhatsAppBackground } from "./scenes/whatsapp/WhatsAppBackground";
import { WhatsAppIntro } from "./scenes/whatsapp/WhatsAppIntro";
import { WhatsAppSplitScreen } from "./scenes/whatsapp/WhatsAppSplitScreen";

const Shell = ({ children }: { children: React.ReactNode }) => (
  <AbsoluteFill>
    <WhatsAppBackground />
    {children}
  </AbsoluteFill>
);

// Total: 3s intro + 12s split-screen = 15s @ 30fps = 450 frames
export const SquareMCPWhatsApp = () => {
  const { fps } = useVideoConfig();

  return (
    <Shell>
      <Sequence durationInFrames={3 * fps}>
        <WhatsAppIntro />
      </Sequence>
      <Sequence from={3 * fps}>
        <WhatsAppSplitScreen />
      </Sequence>
    </Shell>
  );
};
