import React from "react"
import clsx from "clsx"

import styles from './SinglePageTemplate.module.sass'
import matter from "gray-matter";
import {Markdown} from "@/components/Markdown";

export interface IProps extends React.ComponentPropsWithoutRef<'div'> {
  source: string
}

export const SinglePageTemplate: React.FC<IProps> = (props) => {
  const {source, className, ...rest} = props
  const {data, content} = matter(source)
  return (
    <div className={clsx(styles.container, className)} {...rest}>
      <main className={'markdown-body'}>
        <Markdown>{content}</Markdown>
      </main>
    </div>
  )
}