import { useState,useEffect } from "react"

const lines = [
    "Ночь, улица, фонарь, аптека,",
    "Бессмыссленный и тусклый свет.",
    "Живи ещё хоть четверть века - ",
    "Всё будет так. Исхода нет.",
    "Умрёшь -  начнёшь опять сначала",
    "И повториться всё как встарь:",
    "Ночь, ледяная рябь канала",
    "Аптека, Улица, фонарь."
];

const Task = (props)=>{
    const [interval, updateInterval] = useState(props.interval);
    const [lineIdx, updateLineIdx] = useState(0);
    const updateLine = ()=>{
        updateLineIdx((lineIdx+1)%lines.length);
    }
    useEffect(()=>{
        const intervalId = setInterval(updateLine,Number(interval));

        return ()=>{ clearInterval(intervalId)}
    })
    return(
        <>
        <input type="number" value={interval} onChange={(event)=>{updateInterval(Number(event.target.value))}}></input>
        <div className="blackDiv">
            <h2 className="bigWhite">{lines[lineIdx]}</h2>
        </div>
        </>
    )
}
export default Task;