import React from "react";
import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
import type { Slide } from "../compositions/PitchDeck";

interface SlideFrameProps {
  slide: Slide;
  slideIndex: number;
  total: number;
}

export const SlideFrame: React.FC<SlideFrameProps> = ({ slide, slideIndex, total }) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: "clamp" });

  return (
    <AbsoluteFill
      style={{
        backgroundColor: "#0f0f0f",
        opacity,
        display: "flex",
        flexDirection: "column",
        padding: "60px 80px",
      }}
    >
      <div
        style={{
          color: "white",
          fontSize: 48,
          fontWeight: 700,
          marginBottom: 32,
          lineHeight: 1.3,
        }}
      >
        {slide.title}
      </div>
      <div
        style={{
          color: "#d0d0d0",
          fontSize: 28,
          lineHeight: 1.7,
          flex: 1,
        }}
      >
        {slide.body}
      </div>
      <div
        style={{
          position: "absolute",
          bottom: 0,
          left: 0,
          right: 0,
          height: 6,
          backgroundColor: slide.accent,
        }}
      />
      <div
        style={{
          position: "absolute",
          bottom: 24,
          right: 64,
          color: "rgba(255,255,255,0.4)",
          fontSize: 18,
        }}
      >
        {slideIndex + 1} / {total}
      </div>
    </AbsoluteFill>
  );
};
