"use client"

import { useEffect, useRef } from "react"
import Typed from "typed.js"

export default function TypedText() {
  const el = useRef<HTMLSpanElement>(null)

  useEffect(() => {
    if (!el.current) return

    const typed = new Typed(el.current, {
      strings: [
        "I'm Amelia Petrie",
        "I'm a Designer",
        "I'm a Worldbuilder",
        "I'm a Product Manager",
        "I'm a Community Manager",
        "I'm a Marketing Specialist",
      ],
      typeSpeed: 70,
      backSpeed: 50,
      backDelay: 1000,
      startDelay: 300,
      loop: true,
      smartBackspace: true,
    })

    return () => {
      typed.destroy()
    }
  }, [])

  return <span ref={el} className="text-white"></span>
}