import {useEffect, useState} from 'react';

import styles from './disconnected.module.css';

export default function Disconnected() {
  const [dots, setDots] = useState(3);
  const [delta, setDelta] = useState(1);
  useEffect(() => {
    const handle = setTimeout(() => {
      const updated = dots + delta;
      setDots(updated);
      if (updated < 1 || updated > 5) {
        setDelta(-delta);
      }
    }, 100);
    return () => {
      clearTimeout(handle);
    };
  }, [dots, delta]);
  const rendered = Array(dots).fill('.').join('');
  return (
    <div className={styles.disconnected}>
      <p>There&apos;s a problem with the connection.</p>
      <p>{rendered}Reconnection attempt in progress{rendered}</p>
    </div>
  );
}