import React from "react";
import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
import { COLIBRI, brandGradientHorizontal } from "./tokens.js";

export const BrandOutro: React.FC<{
  title: string;
  subtitle?: string;
  cta?: string;
  palette: { primary: string; secondary: string; accent: string };
}> = ({ title, subtitle, cta, palette }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const opacity = interpolate(frame, [0, fps * 0.5], [0, 1], {
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill
      style={{
        background: COLIBRI.bg0,
        justifyContent: "center",
        alignItems: "center",
        padding: 96,
        opacity,
      }}
    >
      <div style={{ textAlign: "center", maxWidth: 1100 }}>
        <div
          style={{
            fontSize: 56,
            fontFamily: COLIBRI.fontDisplay,
            background: brandGradientHorizontal(
              palette.primary,
              palette.secondary,
              palette.accent,
            ),
            WebkitBackgroundClip: "text",
            WebkitTextFillColor: "transparent",
            marginBottom: subtitle || cta ? 20 : 0,
          }}
        >
          {title}
        </div>
        {subtitle ? (
          <div
            style={{
              fontSize: 24,
              color: COLIBRI.text2,
              fontFamily: COLIBRI.fontBody,
              marginBottom: cta ? 28 : 0,
            }}
          >
            {subtitle}
          </div>
        ) : null}
        {cta ? (
          <div
            style={{
              display: "inline-block",
              padding: "14px 28px",
              borderRadius: 10,
              background: brandGradientHorizontal(
                palette.primary,
                palette.secondary,
                palette.accent,
              ),
              color: COLIBRI.text1,
              fontFamily: COLIBRI.fontBody,
              fontSize: 22,
              fontWeight: 600,
              boxShadow: "0 0 40px rgba(181, 101, 245, 0.25)",
            }}
          >
            {cta}
          </div>
        ) : null}
      </div>
    </AbsoluteFill>
  );
};