import { useState, useEffect } from "react";
import PropTypes from "prop-types";
import Link from "next/link";

const About = (props) => {
  const [loaded, setLoaded] = useState(false);
  const { pageTransitionReadyToEnter } = props;

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      pageTransitionReadyToEnter();
      setLoaded(true);
    }, 2000);
    return () => {
      clearTimeout(timeoutId);
    };
  }, [pageTransitionReadyToEnter]);

  if (!loaded) return null;

  return (
    <div className="container bg-success page">
      <h1>About us</h1>
      <p>
        Notice how a loading spinner showed up while my content was "loading"?
        Pretty neat, huh?
      </p>
      <Link href="/" className="btn btn-light">
        Go back home
      </Link>
    </div>
  );
};

About.propTypes = {
  pageTransitionReadyToEnter: PropTypes.func,
};

About.defaultProps = {
  pageTransitionReadyToEnter: () => {},
};

About.pageTransitionDelayEnter = true;

export default About;