'use client' import React, { useEffect, useRef } from 'react' import type { FDCodeEmbedBlock as FDCodeEmbedBlockProps } from '@/payload-types' const maxWidthClasses: Record = { default: 'max-w-[1200px]', narrow: 'max-w-[800px]', wide: 'max-w-[1400px]', full: 'max-w-full', } // Navy stays dark. White/gray adapt to OS dark mode. const bgClasses: Record = { white: 'bg-white dark:bg-fd-navy', navy: 'bg-fd-navy', gray: 'bg-fd-surface-alt dark:bg-fd-navy', yellow: 'bg-fd-yellow', transparent: 'bg-transparent', } /* Priority #5: Responsive radius for embed card wrappers */ const cardRadius = 'rounded-[32px] md:rounded-[50px] lg:rounded-[70px]' export const FDCodeEmbedBlockComponent: React.FC = ({ heading, description, embedType = 'iframe', iframeSrc, iframeTitle = 'Inbäddat formulär', iframeHeight = '600px', iframeAllow, customCode, sandboxed = true, maxWidth = 'default', sectionBackground = 'white', textColor = 'auto', embedBackground = 'none', anchorId, }) => { const customCodeRef = useRef(null) const isDark = sectionBackground === 'navy' const headingColor = textColor === 'white' ? 'text-white' : textColor === 'navy' ? 'text-fd-navy' : isDark ? 'text-fd-yellow' : 'text-fd-navy dark:text-fd-yellow' const bodyColor = textColor === 'white' ? 'text-white' : textColor === 'navy' ? 'text-fd-navy' : isDark ? 'text-white' : 'text-fd-navy dark:text-white' const bgClass = bgClasses[sectionBackground ?? 'white'] || 'bg-white dark:bg-fd-navy' const containerClass = maxWidthClasses[maxWidth ?? 'default'] || 'max-w-[1200px]' const embedWrapperClass = embedBackground === 'card' ? `bg-white dark:bg-white/10 ${cardRadius} shadow-lg p-6 md:p-10 overflow-hidden` : embedBackground === 'navy-card' ? `bg-fd-navy ${cardRadius} shadow-lg p-6 md:p-10 overflow-hidden` : '' useEffect(() => { if (embedType === 'custom' && !sandboxed && customCode && customCodeRef.current) { const container = customCodeRef.current container.innerHTML = customCode const scripts = container.querySelectorAll('script') scripts.forEach((oldScript) => { const newScript = document.createElement('script') Array.from(oldScript.attributes).forEach((attr) => { newScript.setAttribute(attr.name, attr.value) }) newScript.textContent = oldScript.textContent oldScript.parentNode?.replaceChild(newScript, oldScript) }) } }, [embedType, sandboxed, customCode]) const sandboxedSrcDoc = customCode ? ` ${customCode} ` : '' return (

{(heading || description) && (

{heading && (

{heading}

)} {description && (

{description}

)}

{embedType === 'iframe' && iframeSrc && (