import BasicPage from "../../../components/basic-page";
import IDCard from "../../../components/identity-card";

// An object listing pages folks can visit
export async function getStaticProps() {
  const fs = require("fs");
  const yaml = require("js-yaml");
  let GENDER = "";

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

export default function Gender({ GENDER }) {
  return (
    <BasicPage page_title="What's Gender?" card_title="I'm Transgender!">
      {Object.keys(GENDER).map((gender) => (
        <IDCard
          key={gender}
          title={GENDER[gender].title}
          info={GENDER[gender].info}
          url={GENDER[gender].url}
          src={GENDER[gender].src}
          alt={GENDER[gender].alt}
        />
      ))}
    </BasicPage>
  );
}