import React, { useEffect, useRef, useState } from 'react'

import LetterAnimation from '../components/LetterAnimation'

import '../styles/Letters.styl'



type Pair = [string, string]

const pairs: Pair[] = [
	['visualize', 'create'],
	['invision', 'build'],
	['ideate', 'deploy'],
]

export const Duration = 4000

const Letters: React.FC = React.memo(() => {

	const [index, setIndex] = useState<number>(0)
	const wrapper = useRef<HTMLElement>(null)

	useEffect(() => {
		setTimeout(
			() => setIndex((index < pairs.length - 1) ? index + 1 : 0),
			Duration,
		)
	}, [index])

	return <span id={'letters-wrapper'} ref={wrapper}>
		<LetterAnimation text={pairs[index][0] + '.'} />
		<br />
		<LetterAnimation text={pairs[index][1] + '.'} delay={500} />
	</span>
})

export default Letters