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 SEXUALITY = "";
  let page_title = "";
  let card_title = "";

  try {
    let fileContent = fs.readFileSync(
      "./data/identities/sexuality.yml",
      "utf8"
    );
    SEXUALITY = yaml.load(fileContent);
    page_title = SEXUALITY["Sexuality"].page_title;
    card_title = SEXUALITY["Sexuality"].card_title;
    delete SEXUALITY["Sexuality"];
  } catch (e) {
    console.log(e);
  }
  return {
    props: {
      SEXUALITY,
      page_title,
      card_title,
    },
  };
}

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