import Head from "next/head";
import TCard from "../components/title-card";
import FCard from "./footer-card";
import PButton from "../components/page-button";

export default function BasicPage({ page_title, card_title, children }) {
  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">
        <TCard card_title={card_title} />
        <nav>
          <PButton
            title="Take me back home!"
            images={[
              { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
              { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
            ]}
            url="/"
          />
        </nav>
        {children}
        <nav>
          <PButton
            title="Take me back home!"
            images={[
              { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
              { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
            ]}
            url="/"
          />
        </nav>
        <FCard />
      </div>
    </div>
  );
}
