import system from '~/config/system.json'

import styles from '~/styles/about.module.css'

interface Member {
  name: string,
  mainPronouns: string,
  avatarUrl: string,
  color: string,
  bioShort: string,
  readMore: string,
}

export default function About() {
  return (
    <>
      <h1 className="pageTitle">
        About Us
      </h1>
      <main className={styles.container}>
        {system.members.map((member: Member) => {
          const style = { "--member-color": member.color } as React.CSSProperties
          return (
            <section className={styles.member} style={style}>
              <img src={member.avatarUrl} />
              <h2>{member.name}</h2>
              <p className={styles.pronouns}>{member.mainPronouns}</p>
              <p>
                {member.bioShort}
              </p>
              <p><a href={`/about/${member.name.toLowerCase()}`}>{member.readMore}</a></p>
            </section>
          )
        })}
      </main >
      <div className={styles.summary}>
        <p>
          Our system is composed of the above three members.  Generally you
          don't have to care who is most present at any given time, as we share
          memory and flow in and out of front pretty often, but we do appreciate
          when people notice us individually
        </p>
      </div>
    </>
  )
}