import { Grid, Container, Typography, Paper } from "@mui/material";
import { MDXProvider } from "@mdx-js/react";
import Image from "next/image";

const components = {
  h1: (props) => <Typography variant="h1" {...props} />,
  h2: (props) => <Typography variant="h2" {...props} />,
  h3: (props) => <Typography variant="h3" {...props} />,
  h4: (props) => <Typography variant="h4" {...props} />,
  h5: (props) => <Typography variant="h5" {...props} />,
  h6: (props) => <Typography variant="h6" {...props} />,
  code: (props) => (
    <code
      style={{
        backgroundColor: "lightpink",
        borderRadius: "0.4rem",
        padding: "0.2rem",
      }}
      {...props}
    />
  ),
};

export default function PostLayout({ children, meta }) {
  return (
    <MDXProvider components={components}>
      <Container>
        <Grid container spacing={3}>
          <Grid item xs={12}>
            <Paper
              style={{
                padding: "1rem",
                margin: "1rem",
                backgroundColor: "#fafafa",
              }}
            >
              <Typography variant="h4">{meta.title}</Typography>
              <Typography variant="body1">{meta.description}</Typography>
              <hr />
              {children}
            </Paper>
          </Grid>
        </Grid>
      </Container>
    </MDXProvider>
  );
}