import React from "react";
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { slide } from "@remotion/transitions/slide";
import { SCENES, TRANSITION_DURATION } from "../theme";
import { HeroScene } from "../scenes/HeroScene";
import { SearchScene } from "../scenes/SearchScene";
import { CustomizeScene } from "../scenes/CustomizeScene";
import { GroupScene } from "../scenes/GroupScene";
import { ItineraryScene } from "../scenes/ItineraryScene";
import { CTAScene } from "../scenes/CTAScene";

export const AppStorePreview: React.FC = () => {
  const transition = {
    presentation: slide({ direction: "from-right" }),
    timing: linearTiming({ durationInFrames: TRANSITION_DURATION }),
  };

  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={SCENES.hero.durationInFrames}>
        <HeroScene />
      </TransitionSeries.Sequence>

      <TransitionSeries.Transition {...transition} />

      <TransitionSeries.Sequence durationInFrames={SCENES.customize.durationInFrames}>
        <CustomizeScene />
      </TransitionSeries.Sequence>

      <TransitionSeries.Transition {...transition} />

      <TransitionSeries.Sequence durationInFrames={SCENES.search.durationInFrames}>
        <SearchScene />
      </TransitionSeries.Sequence>

      <TransitionSeries.Transition {...transition} />

      <TransitionSeries.Sequence durationInFrames={SCENES.group.durationInFrames}>
        <GroupScene />
      </TransitionSeries.Sequence>

      <TransitionSeries.Transition {...transition} />

      <TransitionSeries.Sequence durationInFrames={SCENES.itinerary.durationInFrames}>
        <ItineraryScene />
      </TransitionSeries.Sequence>

      <TransitionSeries.Transition {...transition} />

      <TransitionSeries.Sequence durationInFrames={SCENES.cta.durationInFrames}>
        <CTAScene />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};
