import { useEffect, useState } from "react";
import { motion } from "framer-motion";

const phrases = [
    "без рисков",
    "под ключ",
    // "с гарантией результата",
    // "с полным сопровождением",
    "для сложных задач",
    "с доказанной надёжностью",
    // "с индивидуальной архитектурой",
    "с прозрачной стоимостью",
    "с расчётом на рост",
    "с отраслевой экспертизой",
    "с защитой данных",
    "с учётом вашей специфики",
    "с долгосрочной поддержкой",
    "готовое к внедрению",
    // "с открытым кодом под заказчика",
    // "с соблюдением всех регуляторных требований",
    "с полным циклом согласования",
    "с фиксированными сроками",
    "с возможностью доработок",
    "с фокусом на результат",
];

export function TypingSpan({
    typingSpeed = 40,
    deletingSpeed = 40,
    pauseTime = 1200
}: {
    typingSpeed?: number
    deletingSpeed?: number
    pauseTime?: number
}) {
    const [phraseIndex, setPhraseIndex] = useState(0);
    const [text, setText] = useState("");
    const [isDeleting, setIsDeleting] = useState(false);

    useEffect(() => {
        const phrase = phrases[phraseIndex];

        let timeout: NodeJS.Timeout;

        if (!isDeleting && text.length < phrase.length) {
            timeout = setTimeout(() => {
                setText(phrase.slice(0, text.length + 1));
            }, typingSpeed);
        }
        else if (!isDeleting && text.length === phrase.length) {
            timeout = setTimeout(() => setIsDeleting(true), pauseTime);
        }
        else if (isDeleting && text.length > 0) {
            timeout = setTimeout(() => {
                setText(phrase.slice(0, text.length - 1));
            }, deletingSpeed);
        }
        else if (isDeleting && text.length === 0) {
            setIsDeleting(false);
            setPhraseIndex((i) => (i + 1) % phrases.length);
        }

        return () => clearTimeout(timeout);
    }, [text, isDeleting, phraseIndex]);

    const words = text.split(" ");

    return (
        <>
            {words.map((word, i) => (
                <span key={i} className="mr-2 h-min leading-none">
                    {word}
                </span>
            ))}

            <motion.span
                className="leading-none"
                animate={{ opacity: [0, 1, 0] }}
                transition={{ duration: 1, repeat: Infinity }}
            >
                |
            </motion.span>
        </>
    );
}