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

export default function OurSupporters() {
  return (
    <MDXProvider components={{ h2: H2, p: Text, ul: UL }}>
      <div className={styles.container}>
        <div className={styles.headerContainer}>
          <h1 className={styles.header}>Our Supporters</h1>
          <Image
            src="our-supporters/supporters-codey.svg"
            className={styles.codey}
          />
        </div>
        <Content />
      </div>
    </MDXProvider>
  );
}

function H2(props: HTMLAttributes<HTMLHeadingElement>) {
  return <h2 {...props} className={styles.title} />;
}

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

function UL(props: HTMLAttributes<HTMLUListElement>) {
  return <ul {...props} className={styles.list} />;
}