import { useState, useRef, useCallback, useEffect } from "react";

const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&*";
const WORDS = ["Разработчик", "Дизайнер", "Инженер"];

export default function TextScramble() {
  const [display, setDisplay] = useState("Разработчик");
  const [wordIndex, setWordIndex] = useState(0);
  const frameRef = useRef(null);

  const scramble = useCallback((target) => {
    let iteration = 0;
    clearInterval(frameRef.current);
    frameRef.current = setInterval(() => {
      setDisplay(
        target.split("").map((char, i) =>
          i < iteration
            ? target[i]
            : CHARS[Math.floor(Math.random() * CHARS.length)]
        ).join("")
      );
      iteration += 1 / 3;
      if (iteration >= target.length) {
        clearInterval(frameRef.current);
        setDisplay(target);
      }
    }, 30);
  }, []);

  const handleClick = () => {
    const next = (wordIndex + 1) % WORDS.length;
    setWordIndex(next);
    scramble(WORDS[next]);
  };

  useEffect(() => () => clearInterval(frameRef.current), []);

  return (
    <div style={{ textAlign: "center" }}>
      <div style={{ fontSize: 38, fontWeight: 700, fontFamily: "monospace" }}>
        {display}
      </div>
      <button onClick={handleClick} style={{
        marginTop: 20, padding: "10px 28px",
        borderRadius: 10, border: "1px solid rgba(59,125,216,0.25)",
        background: "rgba(59,125,216,0.12)", color: "#7eb8f4",
        fontSize: 13, fontWeight: 600, cursor: "pointer",
      }}>
        Scramble
      </button>
    </div>
  );
}
Text Scramble
