Typewriter Effect

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

const sentences = ["Build amazing websites.", "Ship faster.", "Delight users."];

export default function Typewriter() {
  const [text, setText] = useState("");
  const [sentenceIdx, setSentenceIdx] = useState(0);
  const [isDeleting, setIsDeleting] = useState(false);

  useEffect(() => {
    const current = sentences[sentenceIdx];
    const speed = isDeleting ? 35 : 60;

    const timer = setTimeout(() => {
      if (!isDeleting && text === current) {
        setTimeout(() => setIsDeleting(true), 2000);
      } else if (isDeleting && text === "") {
        setIsDeleting(false);
        setSentenceIdx((i) => (i + 1) % sentences.length);
      } else {
        setText(isDeleting ? current.slice(0, text.length - 1) : current.slice(0, text.length + 1));
      }
    }, speed);
    return () => clearTimeout(timer);
  }, [text, isDeleting, sentenceIdx]);

  return <span>{text}<span className="animate-pulse">|</span></span>;
}