import React from 'react';
import { AbsoluteFill, interpolate, random, useCurrentFrame } from 'remotion';

interface Props {
  text: string;
  glitchIntensity: number;
}

export default function CrtGlitch({ text, glitchIntensity }: Props) {
  const frame = useCurrentFrame();
  const resolvedAt = 30;
  const revealRatio = interpolate(frame, [0, resolvedAt], [0, 1], {
    extrapolateRight: 'clamp',
  });
  const charsToShow = Math.floor(text.length * revealRatio);
  const jitter = random(`j-${frame}`) * glitchIntensity * 4 - 2;

  const display = text
    .split('')
    .map((ch, i) => (i < charsToShow ? ch : String.fromCharCode(0x2591)))
    .join('');

  return (
    <AbsoluteFill
      style={{
        backgroundColor: '#000',
        color: '#d0ffdc',
        fontFamily: 'monospace',
        fontSize: 68,
        fontWeight: 700,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        textShadow: `${jitter}px 0 0 #ff3399, ${-jitter}px 0 0 #33ccff`,
        padding: 60,
      }}
    >
      {display}
    </AbsoluteFill>
  );
}

import { z } from 'zod';

export const Schema = z.object({
  text: z.string().describe('$port:text Text to reveal through CRT scan'),
  glitchIntensity: z.number().min(0).max(1).default(0.6),
});