import React, { useRef, useState, useEffect } from 'react';
import Head from "next/head";
import Image from "next/image";
import Flipbook from "~/components/Flipbook";

export default function Home() {
  const mainRef = useRef<HTMLDivElement>(null);
  const [mainWidth, setMainWidth] = useState(350);  // default value

  useEffect(() => {
    if (mainRef.current) {
      setMainWidth(mainRef.current.offsetWidth/2.3);
    }
  }, []);

  return (
    <>
      <Head>
        <title>Create T3 App</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <main className="" ref={mainRef}>
        <Flipbook className="" width={mainWidth} height={mainWidth*1123/794}>
          <div className="bg-gray-300">
            <div className="flex justify-center items-center h-full">
              <a href="https://www.raphyartsy.com/files/KerstNieuw_Raam_2023-24_RArtsy.pdf" target="_blank" className="border-my-red border-[3px] p-4 rounded-full flex gap-2 cursor-pointer hover:border-black hover:bg-white font-mono font-bold text-sm tracking-wide">
                PDF DOWNLOAD
              </a>
            </div>
          </div>
          {Array.from(Array(19), (_, i) => (
            <div className="bg-white" key={i}>
              <Image key={i} alt="pdf page" height={468} width={mainWidth} src={`/catalogus2023/img/pdf_Page${i + 1}.png`} />
            </div>
          ))}
          <div className="bg-gray-300" />
        </Flipbook>
      </main>
    </>
  );
}
