import BasicPage from "../../../components/basic-page";
import IDCard from "../../../components/identity-card";
import IDCardText from "../../../components/identity-card-textbox";
import Link from "next/link";
import Image from "next/image";

export async function getStaticProps() {
  const fs = require("fs");
  const yaml = require("js-yaml");
  let FURSONA = "";

  try {
    let fileContent = fs.readFileSync("./data/identities/fursona.yml", "utf8");
    FURSONA = yaml.load(fileContent);
  } catch (e) {
    console.log(e);
  }
  return {
    props: {
      FURSONA,
    },
  };
}

export default function Fursona({ FURSONA }) {
  return (
    <BasicPage
      page_title={FURSONA["Fursona"].page_title}
      card_title={FURSONA["Fursona"].card_title}
      page_button_title="Take me back home!"
    >
      {Object.keys(FURSONA).map((fursona) => (
        <IDCard
          key={fursona}
          title={FURSONA[fursona].title}
          src={FURSONA[fursona].src}
          alt={FURSONA[fursona].alt}
        >
          <IDCardText info={FURSONA[fursona].info} />
          <div className="rounded-lg hover:animate-yip transition">
            <Link href="https://twitter.com/ribbonfemale" target="_blank">
              <span className="relative inline-flex align-middle">
                <Image
                  className="rounded-lg"
                  src={FURSONA[fursona].src2}
                  layout="intrinsic"
                  width="2048"
                  height="2048"
                  alt={FURSONA[fursona].alt2}
                />
              </span>
            </Link>
          </div>
        </IDCard>
      ))}
    </BasicPage>
  );
}