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

function Home() {
  const [index, setIndex] = useState(0);
  const colors = ['#FF0000', '#00FF00', '#0000FF'];
  const timeout = useRef(0);

  useEffect(() => {
    resetTimeout();
    timeout.current = window.setTimeout(
      () =>
        setIndex((prevIndex) =>
          prevIndex === colors.length - 1 ? 0 : prevIndex + 1
        ),
      2500
    );

    return () => {
      resetTimeout();
    };
  }, [index]);

  const resetTimeout = () => {
    if (timeout.current) {
      clearTimeout(timeout.current);
    }
  };

  return (
    <div style={{ margin: 'auto', overflow: 'hidden' }}>
      <div
        style={{
          whiteSpace: 'nowrap',
          transform: `translateX(${-index * 100}%)`,
          transition: 'ease 1000ms',
        }}
      >
        {colors.map((backgroundColor, colorIndex) => (
          <div
            key={colorIndex}
            style={{
              display: 'inline-block',
              backgroundColor,
              height: '80vh',
              width: '100%',
            }}
          />
        ))}
      </div>
    </div>
  );
}

export default Home;