import Link from 'next/link'
import Image from 'components/Image'

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

export interface Member {
  name: string,
  featured: boolean,
  mainPronouns: string,
  color: string,
  bioShort: string,
  readMore: string,
  profileImg: string,
}

export default function About() {
  const members = system.members as Member[]
  const featuredMembers : Member[] = members.filter(({featured}) => featured)
  const nonfeaturedMembers : Member[] = members.filter(({featured}) => !featured)

  return (
    <>
      <h1 className="pageTitle">
        About Us
      </h1>
      <main className={styles.container}>
        {featuredMembers.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={member.profileImg}
              />
              <h2>{member.name}</h2>
              <p className={styles.pronouns}>{member.mainPronouns}</p>
              <p className={styles.bio}>
                {member.bioShort}
              </p>
              <p>
                <Link href={`/about/${member.name.toLowerCase()}`}>{member.readMore}</Link>
              </p>
            </section>
          )
        })}
      </main>
      <div className={styles.summary}>
        <p>
          Generally unless you know us well, the above three members are who you
          will be interacting with day to day.  They handle the majority of our work,
          conversations, and decisions throughout the day.  In addition though, if you
          get to know us better you will likely meet one or more of the following more
          private members:
        </p>
        {nonfeaturedMembers.map((member: Member) => {
          const style = { "--member-color": member.color } as React.CSSProperties
          return (
            <section className={`${styles.member} ${styles.lower}`} style={style}>
              <Image
                alt=""
                width={80}
                height={80}
                src={member.profileImg}
              />
              <h2>{member.name}</h2>
              <p className={styles.pronouns}>{member.mainPronouns}</p>
              <p className={styles.bio}>
                {member.bioShort}
              </p>
              <p>
                <Link href={`/about/${member.name.toLowerCase()}`}>{member.readMore}</Link>
              </p>
            </section>
          )
        })}
        <p>For avatar sources, see <a href="https://static.tempest.dev/credit.txt">here</a></p>
      </div>

    </>
  )
}