import React from "react";
import { AbsoluteFill, useCurrentFrame } from "remotion";

/**
 * Subtle film grain overlay that makes videos feel organic/real.
 * Uses deterministic noise per frame for reproducible renders.
 */
export const FilmGrain: React.FC<{ opacity?: number }> = ({
  opacity = 0.04,
}) => {
  const frame = useCurrentFrame();
  // Shift the noise pattern each frame using a CSS trick
  const offsetX = ((frame * 73) % 200) - 100;
  const offsetY = ((frame * 47) % 200) - 100;

  return (
    <AbsoluteFill
      style={{
        pointerEvents: "none",
        mixBlendMode: "overlay",
        opacity,
      }}
    >
      <svg width="100%" height="100%">
        <filter id={`grain-${frame % 10}`}>
          <feTurbulence
            type="fractalNoise"
            baseFrequency="0.65"
            numOctaves="3"
            seed={frame}
            stitchTiles="stitch"
          />
        </filter>
        <rect
          width="100%"
          height="100%"
          filter={`url(#grain-${frame % 10})`}
          transform={`translate(${offsetX}, ${offsetY})`}
        />
      </svg>
    </AbsoluteFill>
  );
};