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 the above four members are who interact with others
          throughout our day to day.  They handle our work, our social relationships,
          and our broader plans for life.  In addition, our system has another
          internally-focused member who you will likely not meet unless you seek it out:
        </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>

    </>
  )
}