"use client";
import { useState } from "react";

const CHARS = "!@#$%^&*()_+{}:\"<>?|[];',./ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

export function ScrambleText() {
  const [text, setText] = useState("Hover to Scramble");
  const targetText = "Scrambled Text Effect";

  const scramble = () => {
    let iteration = 0;
    const interval = setInterval(() => {
      setText((prev) => 
        targetText.split("").map((letter, index) => {
          if (index < iteration) {
            return targetText[index];
          }
          return CHARS[Math.floor(Math.random() * CHARS.length)];
        }).join("")
      );

      if (iteration >= targetText.length) {
        clearInterval(interval);
      }

      iteration += 1/3;
    }, 30);
  };

  return (
    <div className="flex items-center justify-center w-full h-40 bg-[#0a0a0a] rounded-xl border border-border">
      <h2 
        onMouseEnter={scramble}
        className="text-2xl font-mono font-bold text-foreground cursor-pointer select-none"
      >
        {text}
      </h2>
    </div>
  );
}