import type { ReactNode } from "react";
import { AbsoluteFill, Sequence, useVideoConfig } from "remotion";
import { TikTokBackground } from "./scenes/tiktok/TikTokBackground";
import { TikTokCTA } from "./scenes/tiktok/TikTokCTA";
import { TikTokDemo } from "./scenes/tiktok/TikTokDemo";
import { TikTokHook } from "./scenes/tiktok/TikTokHook";
import { TikTokProblem } from "./scenes/tiktok/TikTokProblem";
import { TikTokProof } from "./scenes/tiktok/TikTokProof";

const TikTokShell = ({ children }: { children: ReactNode }) => {
  return (
    <AbsoluteFill>
      <TikTokBackground />
      {children}
    </AbsoluteFill>
  );
};

export const SquareMCPTikTokFull = () => {
  const { fps } = useVideoConfig();

  return (
    <TikTokShell>
      <Sequence durationInFrames={3 * fps}>
        <TikTokHook />
      </Sequence>
      <Sequence from={3 * fps} durationInFrames={5 * fps}>
        <TikTokProblem />
      </Sequence>
      <Sequence from={8 * fps} durationInFrames={12 * fps}>
        <TikTokDemo />
      </Sequence>
      <Sequence from={20 * fps} durationInFrames={5 * fps}>
        <TikTokProof />
      </Sequence>
      <Sequence from={25 * fps} durationInFrames={5 * fps}>
        <TikTokCTA />
      </Sequence>
    </TikTokShell>
  );
};

export const SquareMCPTikTokHook = () => {
  return (
    <TikTokShell>
      <TikTokHook />
    </TikTokShell>
  );
};

export const SquareMCPTikTokProblem = () => {
  return (
    <TikTokShell>
      <TikTokProblem />
    </TikTokShell>
  );
};

export const SquareMCPTikTokDemo = () => {
  return (
    <TikTokShell>
      <TikTokDemo />
    </TikTokShell>
  );
};

export const SquareMCPTikTokProof = () => {
  return (
    <TikTokShell>
      <TikTokProof />
    </TikTokShell>
  );
};

export const SquareMCPTikTokCTA = () => {
  return (
    <TikTokShell>
      <TikTokCTA />
    </TikTokShell>
  );
};