import type { MDXComponents } from "mdx/types";
import styles from "./blog-prose.module.css";

function Callout({
  type = "info",
  children,
}: {
  type?: "info" | "warning" | "tip";
  children: React.ReactNode;
}) {
  const typeClass =
    type === "warning"
      ? styles.calloutWarning
      : type === "tip"
        ? styles.calloutTip
        : "";

  return <div className={`${styles.callout} ${typeClass}`}>{children}</div>;
}

export const mdxComponents: MDXComponents = {
  Callout,
};