import type { CSSProperties, FC } from "react";
import { Easing, interpolate, useCurrentFrame } from "remotion";
import { FONT } from "../brand/fonts";
import { COLOR } from "../brand/tokens";
import { decodeText } from "../lib/bits";

const SCRAMBLE_EVERY_FRAMES = 2;

/** Mono label resolving from digits (video twin of DecodeText on the site). Monospaced only. */
export const DecodeLabel: FC<{
  text: string;
  /** Frame (inside the current sequence) where decoding starts. */
  from?: number;
  durationInFrames?: number;
  style?: CSSProperties;
}> = ({ text, from = 0, durationInFrames = 18, style }) => {
  const frame = useCurrentFrame();
  const progress = interpolate(frame, [from, from + durationInFrames], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
    easing: Easing.inOut(Easing.quad),
  });
  const tick = Math.floor(frame / SCRAMBLE_EVERY_FRAMES);
  return (
    <span
      style={{
        fontFamily: FONT.mono,
        fontWeight: 500,
        letterSpacing: "0.2em",
        textTransform: "uppercase",
        color: COLOR.muted,
        whiteSpace: "pre",
        ...style,
      }}
    >
      {decodeText(text, progress, tick)}
    </span>
  );
};