<template>
  <div>
    <p>{{ typedText }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

const props = defineProps({
  text: String,
  delay: {
    type: Number,
    default: 1000,
  },
});

const typedText = ref("");
let timerId;

function typeText() {
  if (props.text.length > typedText.value.length) {
    typedText.value = props.text.substring(0, typedText.value.length + 1);
    timerId = setTimeout(typeText, props.delay);
  }
}

onMounted(() => {
  typeText();
});

onUnmounted(() => {
  clearTimeout(timerId);
});
</script>
