"use client";
import GenericButton from "@/components/GenericButton";
import { ArrowLongLeftIcon, ArrowSmallUpIcon } from "@heroicons/react/24/solid";
import Link from "next/link";
import { ReactNode, useEffect, useState } from "react";

interface Props {
  children: ReactNode;
}

const ArticlesLayout = ({ children }: Props) => {
  const [isTopOfPage, setIsTopOfPage] = useState(true);

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY <= 500) {
        setIsTopOfPage(true);
      } else {
        setIsTopOfPage(false);
      }
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <div className="w-11/12 md:w-2/5 mx-auto mt-20">
      <Link href="/articles" className="font-bold block my-5">
        <ArrowLongLeftIcon className="w-[24px] inline "></ArrowLongLeftIcon>{" "}
        View all Articles
      </Link>
      {children}
      <Link href="/articles" className="font-bold block my-5">
        <ArrowLongLeftIcon className="w-[24px] inline "></ArrowLongLeftIcon>{" "}
        View all Articles
      </Link>
      {/* For some reason if I use a <Link> here it doesn't scroll all the way to the top of the page. */}
      {isTopOfPage ? (
        <></>
      ) : (
        <a
          href="#"
          className="p-3 m-3 rounded-lg align-middle drop-shadow-md hover:drop-shadow-xl transition-all duration-300 fixed bottom-0 md:right-1/4 md:mr-[-4rem] right-0 mr-5 mb-5 bg-primary-100 flex items-center flex-col"
        >
          <ArrowSmallUpIcon className="w-[24px]"></ArrowSmallUpIcon>
          <div className="text-sm italic">To Top</div>
        </a>
      )}
    </div>
  );
};

export default ArticlesLayout;