import Head from "next/head";
import Image from "next/image";
import WCard from "../components/werefox-card";
import FCard from "./footer-card";

export default function HRT({ is_home, page_title, card_title, children }) {
  if (is_home) {
    return (
      <div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd">
        <Head>
          <title>{page_title}</title>
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <div className="container space-y-4 mx-auto px-4 py-4">
          <WCard isTitle="true">
            <h1 className="p-4 text-xl text-center text-werefox-blue-dark dark:text-werefox-blue">
              <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                {" "}
                <Image
                  src="/emoji/pixel_alexis.png"
                  layout="fill"
                  objectFit="contain"
                  alt="Pixel Alexis!"
                />{" "}
              </span>
              {"- "}
              {card_title}
            </h1>
          </WCard>
          {children}
          <FCard />
        </div>
      </div>
    );
  } else {
    return (
      <div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd">
        <Head>
          <title>{page_title}</title>
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <div className="container space-y-4 mx-auto px-4 py-4">
          <WCard isTitle="true">
            <h1 className="p-4 text-xl text-center text-werefox-blue-dark dark:text-werefox-blue">
              <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                {" "}
                <Image
                  src="/emoji/pixel_alexis.png"
                  layout="fill"
                  objectFit="contain"
                  alt="Pixel Alexis!"
                />{" "}
              </span>
              {"- "}
              {card_title}
            </h1>
          </WCard>
          <WCard
            isCardButton="true"
            extraClasses=""
            imageObj={[
              { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
              { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
            ]}
            innerText="Take me back home!"
            url="/"
          />
          {children}
          <WCard
            isCardButton="true"
            extraClasses=""
            imageObj={[
              { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
              { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
            ]}
            innerText="Take me back home!"
            url="/"
          />
          <FCard />
        </div>
      </div>
    );
  }
}
