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

// 엔드카드: 브랜드 + 위치 + AI 디스클로저 (가드레일 필수)
export const EndCard: React.FC<{
  brand: string;
  location: string;
  disclosure: string;
  fromFrame: number;
}> = ({ brand, location, disclosure, fromFrame }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const appear = interpolate(frame, [fromFrame, fromFrame + 12], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
  const brandSpring = spring({
    frame: frame - fromFrame,
    fps,
    config: { damping: 200, mass: 0.5 },
  });
  const brandScale = interpolate(brandSpring, [0, 1], [0.92, 1]);

  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        // 하단을 살짝 어둡게 덮어 브랜드 가독성 확보
        background: `rgba(0,0,0,${0.42 * appear})`,
        opacity: appear,
      }}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          transform: `scale(${brandScale})`,
        }}
      >
        <div
          style={{
            fontFamily: serifFont,
            fontWeight: 800,
            fontSize: 76,
            color: "#FFFFFF",
            letterSpacing: 1,
            textShadow: "0 3px 20px rgba(0,0,0,0.7)",
          }}
        >
          {brand}
        </div>
        <div
          style={{
            fontFamily: serifFont,
            fontWeight: 400,
            fontSize: 30,
            color: "#FFE9C7",
            marginTop: 18,
            letterSpacing: 2,
          }}
        >
          {location}
        </div>
      </div>
      <div
        style={{
          position: "absolute",
          bottom: 70,
          fontFamily: serifFont,
          fontWeight: 400,
          fontSize: 19,
          color: "rgba(255,255,255,0.72)",
          textAlign: "center",
          padding: "0 40px",
        }}
      >
        {disclosure}
      </div>
    </AbsoluteFill>
  );
};
