import React from "react";
import {
  useCurrentFrame,
  interpolate,
  AbsoluteFill,
} from "remotion";
import { serifFont } from "../fonts";

// 브랜드 자막: 페이드 + 미세 상승 (Profile A 모션 프리셋)
export const Subtitle: React.FC<{
  text: string;
  fromFrame: number;
  toFrame: number;
}> = ({ text, fromFrame, toFrame }) => {
  const frame = useCurrentFrame();

  const opacity = interpolate(
    frame,
    [fromFrame, fromFrame + 10, toFrame - 10, toFrame],
    [0, 1, 1, 0],
    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
  );
  const rise = interpolate(frame, [fromFrame, fromFrame + 18], [18, 0], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill
      style={{
        justifyContent: "flex-end",
        alignItems: "center",
        paddingBottom: 220,
        opacity,
      }}
    >
      <div
        style={{
          fontFamily: serifFont,
          fontWeight: 700,
          fontSize: 50,
          color: "#FFFFFF",
          textAlign: "center",
          letterSpacing: 1,
          transform: `translateY(${rise}px)`,
          textShadow: "0 2px 16px rgba(0,0,0,0.8)",
        }}
      >
        {text}
      </div>
    </AbsoluteFill>
  );
};
