"use client";

import { useRef } from "react";
import { motion, useScroll, useTransform } from "motion/react";

/**
 * Indigo deepens with every dip in the dye range, and this section does the
 * same thing as you scroll it. The background moves from raw cloth to full
 * saturation, which is the argument the denim page is making anyway.
 */
export function IndigoShift({ children }: { children: React.ReactNode }) {
  const ref = useRef<HTMLDivElement>(null);

  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"],
  });

  const background = useTransform(
    scrollYProgress,
    [0, 0.35, 0.7, 1],
    ["#080b14", "#0e1533", "#16224a", "#0a0f22"],
  );

  // A colour shift is not vestibular motion and it is driven entirely by the
  // reader's own scrolling, so it runs for everyone.
  return (
    <motion.div ref={ref} style={{ backgroundColor: background }}>
      {children}
    </motion.div>
  );
}