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

interface ComponentProps {
    Inputinterval: number
}


const Task = ({Inputinterval}:ComponentProps): ReactElement =>{
    const [interval, updateInterval] = useState<number>(Inputinterval);
    const [lineIdx, updateLineIdx] = useState<number>(0);
    const updateLine = ():void =>{
        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;