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;
        const opacity = interpolate(
          frame,
          [start, start + 12, toFrame - 12, toFrame],
          [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>
  );
};