"use client";

import { PropsWithChildren } from "react";
import { useTheme } from "@mui/material/styles";


export function Typography({ children }: PropsWithChildren) {
  const theme = useTheme();
  return (
    <div
      className={`prose ${
        theme.palette.mode === "dark" ? "prose-invert" : "prose-zinc"
      } prose-code:font-code ${
        theme.palette.mode === "dark"
          ? "dark:prose-code:bg-stone-950/95"
          : "prose-code:bg-stone-50"
      } prose-pre:bg-background prose-headings:scroll-m-20 w-[85vw] sm:w-full sm:mx-auto prose-code:text-sm prose-code:leading-6 ${
        theme.palette.mode === "dark"
          ? "dark:prose-code:text-white"
          : "prose-code:text-stone-800"
      } prose-code:p-1 prose-code:rounded-md prose-code:border pt-2 !min-w-full prose-img:rounded-md prose-img:border prose-code:before:content-none prose-code:after:content-none prose-code:px-1.5 prose-code:overflow-x-auto`}
    >
      {children}
    </div>
  );
}