import BasicPage from "../../../components/basic-page";
import IDCard from "../../../components/identity-card";
import IDCardText from "../../../components/identity-card-textbox";
import IDCardButton from "../../../components/identity-card-button";

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

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

export default function Gender({ GENDER }) {
  return (
    <BasicPage
      page_title={GENDER["Gender"].page_title}
      card_title={GENDER["Gender"].card_title}
      page_button_title="Take me back home!"
    >
      {Object.keys(GENDER).map((gender) => (
        <IDCard
          key={gender}
          title={GENDER[gender].title}
          src={GENDER[gender].src}
          alt={GENDER[gender].alt}
        >
          <IDCardText info={GENDER[gender].info} />
          <IDCardButton url={GENDER[gender].url} button_text="Learn More" />
        </IDCard>
      ))}
    </BasicPage>
  );
}
