"use client";
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="min-h-screen w-full">
      <div className="mx-auto w-11/12 py-24 md:w-2/5">
        <Link href="/articles" className="my-5 block font-bold">
          <ArrowLongLeftIcon className="inline w-[24px] "></ArrowLongLeftIcon>{" "}
          View all Articles
        </Link>
        {children}
        <Link href="/articles" className="my-5 block font-bold">
          <ArrowLongLeftIcon className="inline w-[24px] "></ArrowLongLeftIcon>{" "}
          View all Articles
        </Link>
        {isTopOfPage ? (
          <></>
        ) : (
          <button
            onClick={() => window.scrollTo(0, 0)}
            className="fixed bottom-0 right-0 m-3 mb-5 mr-5 flex flex-col items-center rounded-lg bg-primary-100 p-3 align-middle drop-shadow-md transition-all duration-300 hover:drop-shadow-xl md:right-1/4 md:mr-[-4rem]"
          >
            <ArrowSmallUpIcon className="w-[24px]"></ArrowSmallUpIcon>
            <div className="text-sm italic">To Top</div>
          </button>
        )}
      </div>
    </div>
  );
};

export default ArticlesLayout;