import dynamic from "next/dynamic";
import { Inter } from "next/font/google";
import { useState } from "react";

export default function Home() {
  const [showBanner, setShowBanner] = useState(true);
  const [lessons, setLessons] = useState<Element[]>([]);

  const loadLesson = (name: string) => {
    setShowBanner(false);

    const LessonContainer = dynamic(
      () => import("../components/LessonContainer"),
      { loading: () => <p>Loading...</p> }
    );

    setLessons([...lessons, <LessonContainer name={name} />]);
  };

  return (
    <main>
      <details
        className="intro"
        open={showBanner}
      >
        <summary>Intro</summary>
        <p>
          Functional programming is a structured way of thinking that gives us a
          better understanding about how programs behave. Although it relies on
          theoretical foundations, the things you will take away will help guide
          your thinking no matter what paradigm!
        </p>

        <p>
          Ready to start learning functional programming? Click one of the
          buttons below to get started!
        </p>

        <button onClick={() => loadLesson("functions")}>
          Get Started
          <br />
          <small>Functions &darr;</small>
        </button>
        <button onClick={() => loadLesson("types")}>
          Get Started
          <br />
          <small>Types &darr;</small>
        </button>
        <button onClick={() => loadLesson("state")}>
          Get Started
          <br />
          <small>State &darr;</small>
        </button>
      </details>

      {lessons}
    </main>
  );
}