import { useTranslation } from "next-i18next";
import Link from "next/link";
import Header from "./header";
import Footer from "./footer";
import Button from "./button";
import Socials from "./socials";

const Layout = ({ title, subtitle, main, children, page, noHeader = false }) => {
  const { t: translate } = useTranslation();

  return (
    <div className="flex flex-col min-h-screen [&>*:last-child]:mt-auto">
      <Header />

      {/* Si noHeader está activo, saltamos la cabecera por completo */}
      {!noHeader && (
        <div className="h-fit">
          <div
            className={`relative overflow-hidden ${main ? "h-full" : "h-48"}`}
          >
            <div
              className={`absolute x-0 y-0 w-full ${
                main ? "h-full" : "h-48"
              } bg-gradient-to-b from-white to-zinc-200 -z-50`}
            ></div>
            {main && (
              <>
                <div className="layout pt-20 pb-10">
                  <p className="font-cooperBold text-4xl sm:text-5xl text-center">
                    {translate("index.layout.title")}
                  </p>
                  <p className="mt-6 max-w-3xl mx-auto text-center">
                    {translate("index.layout.subtitle")}
                  </p>
                  <div className="flex justify-center items-center pt-10">
                    <Link href="/location">
                      <Button text={translate("index.layout.button")} />{" "}
                    </Link>
                  </div>
                </div>

                <div className="px-10 lg:px-10 xl:px-20 2xl:px-40 flex flex-col xl:flex-row justify-center">
                  <div className="flex items-center justify-center">
                    <div className="hidden lg:block relative w-full max-w-2xl">
                      <div className="absolute top-0 -left-4 w-108 h-108 bg-red-300 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse"></div>
                      <div className="absolute top-0 -right-4 w-108 h-108 bg-gray-300 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse animation-delay-2000"></div>
                      <div className="invisible xl:visible absolute -bottom-8 left-20 w-108 h-108 bg-blue-300 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse animation-delay-4000"></div>
                      <div className="m-8 relative space-y-4">
                        <div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
                          <div className="flex-1">
                            <div className="h-6 flex flex-col justify-center w-108 bg-gray-300 rounded">
                              <div className="w-fit typewriter p-2">
                                <h1 className="text-sm font-novamono">{`∫ₐᵇ f(x) dx = F(b) - F(a) `}</h1>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
                          <div className="flex-1">
                            <div className="h-6 w-56 bg-gray-300 rounded">
                              <div className="h-6 flex flex-col justify-center w-108 bg-gray-300 rounded">
                                <div className="w-fit typewriter p-2">
                                  <h1 className="text-sm font-novamono">{`x = (-b ± √(b² - 4ac)) / 2a`}</h1>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div className="relative p-5 bg-white rounded-lg flex items-center justify-between space-x-4">
                          <div className="flex-1">
                            <div className="h-4 w-44 bg-gray-300 rounded"></div>
                          </div>
                          <div>
                            <div className="w-28 h-6 rounded-lg bg-gray-300"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="mt-10 xl:mt-2 xl:ml-6 2xl:ml-20 ">
                    <Socials />
                  </div>
                </div>
                <div className="flex justify-center py-16"></div>
              </>
            )}

            {!main && (
              <div className="layout flex">
                <div className="p-10 h-48 mx-auto flex flex-col justify-center">
                  <div className="absolute top-0 left-10 w-108 h-108 bg-red-300 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse"></div>
                  <div className="absolute top-0 right-10 w-108 h-108 bg-zinc-300 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse animation-delay-2000"></div>
                  <h1 className="text-4xl md:text-6xl font-cooperBold">
                    {translate(title)}
                  </h1>
                  <p className="text-xl">{translate(subtitle)}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      )}

      {/* CONTENIDO GENERAL */}
      {children}
      <Footer />
    </div>
  );
};

export default Layout;
