import React from "react";
import { AbsoluteFill } from "remotion";
import { ColibriRemotionInputProps } from "../../schemas/manifest.js";
import { resolvePalette } from "./props.js";
import { COLIBRI, brandGradient } from "./tokens.js";

type ThumbnailFrameProps = ColibriRemotionInputProps & {
  eyebrow?: string;
  accentColor?: string;
};

export const ThumbnailFrame: React.FC<ThumbnailFrameProps> = (props) => {
  const palette = resolvePalette(props);

  return (
    <AbsoluteFill
      style={{
        background: brandGradient(palette.primary, palette.secondary, palette.accent),
        justifyContent: "center",
        alignItems: "center",
        padding: 80,
        fontFamily: COLIBRI.fontDisplay,
        color: COLIBRI.text1,
      }}
    >
      {props.eyebrow ? (
        <div
          style={{
            position: "absolute",
            top: 48,
            left: 48,
            fontSize: 18,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            color: props.accentColor ?? COLIBRI.accentTeal,
            fontFamily: COLIBRI.fontBody,
            fontWeight: 600,
          }}
        >
          {props.eyebrow}
        </div>
      ) : null}
      <div style={{ fontSize: 64, textAlign: "center", lineHeight: 1.05 }}>
        {props.title}
      </div>
    </AbsoluteFill>
  );
};