import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";
import { COLORS } from "../../styles";

export const TikTokBackground = () => {
  const frame = useCurrentFrame();
  const orbit = interpolate(frame % 180, [0, 90, 180], [0, 1, 0]);

  return (
    <AbsoluteFill
      style={{
        background: `radial-gradient(circle at ${20 + orbit * 45}% ${18 + orbit * 30}%, rgba(125, 182, 255, 0.18), transparent 28%), radial-gradient(circle at 80% 78%, rgba(14, 99, 246, 0.22), transparent 30%), linear-gradient(180deg, #070812 0%, ${COLORS.bg} 100%)`,
      }}
    >
      <div
        style={{
          position: "absolute",
          inset: 0,
          backgroundImage:
            "linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)",
          backgroundSize: "60px 60px",
          maskImage: "linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0.95))",
        }}
      />
    </AbsoluteFill>
  );
};
