import PageLayout from "../components/PageLayout";
import bgLayout from "../assets/Исходники/background.jpg";
import Arrow from "../components/Arrow";

import { useEffect, useState } from "react";

export default function Dashboard() {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        setIsLoaded(true);
      });
    });
  }, []);

  return (
    <PageLayout>
      <main
        className="px-5 md:px-16 grow w-full bg-cover bg-center bg-no-repeat h-screen overflow-hidden"
        style={{ backgroundImage: `url(${bgLayout})` }}
      >
        <div className="mt-10 md:mt-37.5 text-2xl md:text-6xl font-bold text-white flex flex-col">
          <div
            className={`transition-all duration-1000 ease-out ${isLoaded ? "translate-x-0" : "-translate-x-[100vw]"
              }`}
          >
            Свежие морепродукты <br />
            на любой вкус
            <div className="pl-4.5 md:pl-10 py-1.5 md:py-6.5 font-normal text-base md:text-2xl flex flex-row items-center">
              <div className="mr-5 md:mr-10">Смотреть товары</div>
              <Arrow link="/shop" />
            </div>
          </div>
        </div>
      </main>
    </PageLayout>
  );
}
