import clsx from "clsx";
import * as React from "react";
import * as styles from "./styles.module.css";

interface ProseProps extends React.ComponentPropsWithoutRef<"article"> {
  as: string | React.ElementType;
  wysiwyg?: string;
}

export const Prose = React.forwardRef<HTMLDivElement, ProseProps>(
  (props, ref) => {
    const { as = "article", children, className, wysiwyg, ...rest } = props;
    const Tag = as;
    return (
      <Tag
        ref={ref}
        className={clsx(styles.article, className)}
        data-component="Prose$Brevity"
        {...rest}
      >
        <div
          className={styles.content}
          {...(wysiwyg ? { dangerouslySetInnerHTML: { __html: wysiwyg } } : {})}
        >
          {children}
        </div>
      </Tag>
    );
  },
);

Prose.displayName = "Prose";