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

import { useEffect, useState } from "react";

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

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

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