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

export function renderBackButton(page_button_title, url) {
  if (Boolean(page_button_title)) {
    return (
      <nav>
        <PButton
          title={page_button_title}
          images={[
            { src: "/emoji/:aliceheartblack:.png", alt: "It's Alice as an emoji with a black heart" },
          ]}
          url={url}
        />
      </nav>
    );
  } else {
    return <div hidden></div>;
  }
}

export default function BasicPage({
  page_title,
  card_title,
  children,
  back_url,
  page_button_title,
}) {
  const url = Boolean(back_url) ? back_url : "/";

  return (
    <div className="min-h-screen bg-alice-werefox-grey-light dark:bg-alice-werefox-grey 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} />
        {renderBackButton(page_button_title, url)}
        {children}
        {renderBackButton(page_button_title, url)}
        <FCard />
      </div>
    </div>
  );
}
