Teleprompter

export default function Teleprompter() {
  const [text, setText] = useState("");
  const [speed, setSpeed] = useState(50);
  const [scrolling, setScrolling] = useState(false);
  const textRef = useRef(null);

  useEffect(() => {
    let interval;
    if (scrolling) {
      interval = setInterval(() => {
        textRef.current.scrollBy(0, 1);
      }, 100 - speed);
    }
    return () => clearInterval(interval);
  }, [scrolling, speed]);

  return (
    <div className="p-4 flex flex-col items-center">
      <textarea
        className="w-full h-40 p-2 border rounded"
        placeholder="Nhập văn bản..."
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <div className="my-4 flex items-center gap-4">
        <label className="flex items-center gap-2">
          Tốc độ:
          <input
            type="range"
            min="10"
            max="100"
            value={speed}
            onChange={(e) => setSpeed(e.target.value)}
          />
        </label>
        <button
          className="px-4 py-2 bg-blue-500 text-white rounded"
          onClick={() => setScrolling(!scrolling)}
        >
          {scrolling ? "Dừng" : "Bắt đầu"}
        </button>
      </div>
      <div
        ref={textRef}
        className="h-80 w-full overflow-hidden border p-4 bg-gray-100 text-xl leading-loose"
        style={{ whiteSpace: "pre-wrap" }}
      >
        {text}
      </div>
    </div>
  );
}