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

// 브랜드 감성 2줄: 우상단 통일 위치에 한 덩어리로 쌓아 노출.
// 첫 줄 먼저, 둘째 줄 살짝 뒤따라 등장 → 같은 자리에서 읽힘.
export const BrandLines: React.FC<{
  lines: string[];
  fromFrame: number;
  toFrame: number;
}> = ({ lines, fromFrame, toFrame }) => {
  const frame = useCurrentFrame();
  const LINE_STAGGER = 18; // 줄 간 등장 간격(frame)

  return (
    <AbsoluteFill
      style={{
        justifyContent: "flex-start",
        alignItems: "center", // 가로 중앙 정렬
        flexDirection: "column",
        paddingTop: 230, // 상단 (~18%) 높이 유지
        gap: 8,
      }}
    >
      {lines.map((line, i) => {
        const start = fromFrame + i * LINE_STAGGER;
        // interpolate는 배열이 단조증가해야 한다.
        // 영상이 짧아 toFrame 이 start+24 이하로 내려오면 범위가 뒤집혀 크래시 발생.
        const fadeIn  = start + 12;
        const fadeOut = Math.max(fadeIn + 1, toFrame - 12);
        const end     = Math.max(fadeOut + 1, toFrame);
        const opacity = interpolate(
          frame,
          [start, fadeIn, fadeOut, end],
          [0, 1, 1, 0],
          { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
        );
        const rise = interpolate(frame, [start, start + 16], [16, 0], {
          extrapolateLeft: "clamp",
          extrapolateRight: "clamp",
        });
        return (
          <div
            key={i}
            style={{
              opacity,
              transform: `translateY(${rise}px)`,
              fontFamily: serifFont,
              fontWeight: 700,
              fontSize: 46,
              color: "#FFFFFF",
              textAlign: "center",
              letterSpacing: 1,
              textShadow: "0 2px 16px rgba(0,0,0,0.85)",
            }}
          >
            {line}
          </div>
        );
      })}
    </AbsoluteFill>
  );
};
