import * as React from "react"
import { addPropertyControls, ControlType } from "framer"

/**
 * Bind HTML to the plain-text Article HTML field supplied by outwrite.ai.
 * Use only trusted article HTML. This component intentionally renders HTML
 * on the server so headings, links and tables are available to search engines.
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight auto
 */
export default function OutwriteArticle({ html = "", style }) {
    return <div className="outwrite-article" style={{ ...style, width: "100%", lineHeight: 1.75, overflowWrap: "anywhere" }}>
        <style>{`.outwrite-article img{max-width:100%;height:auto;border-radius:12px}.outwrite-article figure{margin:0 0 2em}.outwrite-article h2,.outwrite-article h3{line-height:1.25;margin:1.6em 0 .6em}.outwrite-article p{margin:0 0 1em}.outwrite-article ul,.outwrite-article ol{padding-left:1.5em}.outwrite-article li{margin:.4em 0}.outwrite-article table{border-collapse:collapse;width:100%;margin:1.5em 0}.outwrite-article th,.outwrite-article td{border:1px solid color-mix(in srgb,currentColor 20%,transparent);padding:.75em;text-align:left}.outwrite-article pre{overflow:auto;padding:1em}.outwrite-article blockquote{border-left:3px solid currentColor;margin-left:0;padding-left:1em}.outwrite-article a{text-decoration:underline;text-underline-offset:3px}`}</style>
        <div dangerouslySetInnerHTML={{ __html: html }} />
    </div>
}
addPropertyControls(OutwriteArticle, { html: { type: ControlType.String, title: "HTML", displayTextArea: true } })