import Image from 'next/image'

import system from '~/config/system.json'
import styles from '~/styles/about.module.css'
import profilePics from '~/utils/profiles'

export interface Member {
  name: string,
  mainPronouns: 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}>
              <Image alt="" width={150} height={150} src={profilePics[member.name.toLowerCase()]} />
              <h2>{member.name}</h2>
              <p className={styles.pronouns}>{member.mainPronouns}</p>
              <p className={styles.bio}>
                {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>
    </>
  )
}