import { WYSIWYG_STYLES } from "@/components/generic/Blocks/Admin/TextBlock";
import { ImageBlock } from "./ImageBlock";

export function TextImageBlock({ content }) {
    const imgLeft = content.image_position === "left";
    return (
        <>
            <style>{WYSIWYG_STYLES}</style>
            <div className="flex flex-col gap-6 items-start sm:grid sm:grid-cols-2 sm:gap-6">
                {imgLeft && <ImageBlock content={content} />}
                <div
                    className="wysiwyg-preview text-sm w-full"
                    dangerouslySetInnerHTML={{ __html: content.body || "<p class='text-muted-foreground italic'>Empty text</p>" }}
                />
                {!imgLeft && <ImageBlock content={content} />}
            </div>
        </>
    );
}