import { readFileSync } from 'fs'

import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'

import mdComponents from '../components/mdComponents'

export default function TermsPage({ source }) {
  return (
    <div className="text-gray-700">
      <MDXRemote {...source} components={{ ...mdComponents }} />
    </div>
  )
}

export async function getStaticProps() {
  const source = readFileSync('./md/terms.md', 'utf8')
  const mdxSource = await serialize(source)
  return { props: { source: mdxSource } }
}