import { clsx } from "clsx";

// Prose wrapper for MDX content — Tailwind Typography with brand-tuned links,
// centred column that matches the Protocol layout.
export function Prose<T extends React.ElementType = "div">({
  as,
  className,
  ...props
}: Omit<React.ComponentPropsWithoutRef<T>, "as" | "className"> & {
  as?: T;
  className?: string;
}) {
  const Component = as ?? "div";

  return (
    <Component
      className={clsx(
        className,
        "prose dark:prose-invert",
        "prose-a:font-medium prose-a:text-brand-orange prose-a:no-underline hover:prose-a:underline",
        "prose-code:before:content-none prose-code:after:content-none",
        "max-w-2xl lg:max-w-3xl",
      )}
      {...props}
    />
  );
}