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

export const HookTitle: React.FC<{
  eyebrow: string;
  title: string;
  fromFrame: number;
  toFrame: number;
}> = ({ eyebrow, title, fromFrame, toFrame }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // 스프링 슬라이드-다운 등장
  const enter = spring({
    frame: frame - fromFrame,
    fps,
    config: { damping: 200, mass: 0.6 },
  });
  const translateY = interpolate(enter, [0, 1], [-60, 0]);
  // 퇴장 페이드
  const fadeIn  = fromFrame + 8;
  const fadeOut = Math.max(fadeIn + 1, toFrame - 12);
  const end     = Math.max(fadeOut + 1, toFrame);
  const opacity = interpolate(
    frame,
    [fromFrame, fadeIn, fadeOut, end],
    [0, 1, 1, 0],
    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
  );

  return (
    <AbsoluteFill style={{ opacity }}>
      {/* 상단 가독성 그라데이션 */}
      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          height: 580,
          background:
            "linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%)",
        }}
      />
      <div
        style={{
          position: "absolute",
          top: 280,
          left: 0,
          right: 0,
          transform: `translateY(${translateY}px)`,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          padding: "0 48px",
          textAlign: "center",
        }}
      >
        <div
          style={{
            fontFamily: hookFont,
            fontSize: 34,
            color: "#FFE9C7",
            letterSpacing: 2,
            marginBottom: 14,
            textShadow: "0 2px 12px rgba(0,0,0,0.7)",
          }}
        >
          {eyebrow}
        </div>
        <div
          style={{
            fontFamily: hookFont,
            fontSize: 62,
            lineHeight: 1.18,
            color: "#FFFFFF",
            textShadow: "0 3px 18px rgba(0,0,0,0.85)",
            WebkitTextStroke: "1.5px rgba(0,0,0,0.35)",
          }}
        >
          {title}
        </div>
      </div>
    </AbsoluteFill>
  );
};
