import Markdown from "markdown-to-jsx";
import { notFound } from "next/navigation";

import InfoBar from "~/components/InfoBar";

import styles from "~/styles/index.module.css"
import system from "~/config/system.json"

export async function generateStaticParams() {
  const memberSlugs = system.members.map(member => member.name.toLowerCase())
  return memberSlugs.map((name: string) => ({ name }))
}

export default function MemberPage({ params: { name } }) {
  const member = system.members.find(member => member.name.toLowerCase() === name)

  if (!member) notFound()

  return (
    <>
      <main className="mainColumn">
        <InfoBar memberName={member.name} />
        <p>{member.bioShort}</p>
        <Markdown>{member.bioContinued}</Markdown>
        {member.bioFields?.length && (

          <div className={styles.glance}>
            {member.bioFields.map(({ name, value }) => (
              <>
                <span className={styles.label}>{name}</span>
                <span>{value}</span>
              </>
            ))}
          </div>
        )}
      </main>
    </>
  )
}