import React from "react";
import { AbsoluteFill, Series } from "remotion";
import { SlideFrame } from "../components/SlideFrame";
import { TitleSlide } from "../components/TitleSlide";

export interface Slide {
  title: string;
  body: string;
  accent: string;
}

export interface PitchDeckProps {
  slides: Slide[];
  companyName: string;
}

const FRAMES_PER_SLIDE = 90;

export const PitchDeck: React.FC<PitchDeckProps> & {
  calculateMetadata: (opts: { props: PitchDeckProps }) => { durationInFrames: number };
} = ({ slides, companyName }) => {
  return (
    <AbsoluteFill style={{ backgroundColor: "#0f0f0f" }}>
      <Series>
        {slides.map((slide, i) => (
          <Series.Sequence key={i} durationInFrames={FRAMES_PER_SLIDE}>
            {i === 0 && companyName ? (
              <TitleSlide companyName={companyName} subtitle={slide.title} />
            ) : (
              <SlideFrame slide={slide} slideIndex={i} total={slides.length} />
            )}
          </Series.Sequence>
        ))}
      </Series>
    </AbsoluteFill>
  );
};

PitchDeck.calculateMetadata = ({ props }) => ({
  durationInFrames: Math.max(props.slides.length * FRAMES_PER_SLIDE, FRAMES_PER_SLIDE),
});