import React, { HTMLAttributes } from "react";
import { MDXProvider } from "@mdx-js/react";
import { Image } from "../../components/Image";
import Content from "../../content/about/index.mdx";
import styles from "./index.module.css";
import { Button } from "../../components/Button";
import { SocialLinks } from "../../components/SocialLinks";

export default function AboutUs() {
  return (
    <MDXProvider components={{ h2: H2, p: Text, div: Div }}>
      <div>
        <h1 className={styles.title}>About Us!</h1>
      </div>
      <div className={styles.flexBox}>
        <Image src="/about/codey.svg" className={styles.codey} />
      </div>
      <div className={styles.content}>
        <div className={styles.headings}>
          <Content />
        </div>
        <div className={styles.mailingList}>
          <h2>Connect with us!</h2>
          <p>
            Drop by any of our social media outlets to learn more about us, keep
            up-to-date with our upcoming events, or to chat with our members!
          </p>
          <SocialLinks color="gradient" size="big" />
          <p>Send feedback through our Feedback Form </p>
          <h2>Join our Mailing List!</h2>
          <form action="">
            <div>
              <input type="text" placeholder="Full Name*" required />
            </div>
            <div>
              <input type="text" placeholder="Email*" required />
            </div>
            <Button>Subscribe</Button>
          </form>
        </div>
      </div>
    </MDXProvider>
  );
}

/*to be replaced by css rules in about-us.module.css*/
function H2(props: HTMLAttributes<HTMLHeadingElement>) {
  return <h2 {...props} className={styles.headings} />;
}

function Text(props: HTMLAttributes<HTMLParagraphElement>) {
  return <p {...props} className={styles.text} />;
}

function Div(props: HTMLAttributes<HTMLHeadingElement>) {
  return <div {...props} className={styles.divs} />;
}