import { Puzzle } from 'lucide-react'
import { parseWidgetEmbed, WIDGET_PROVIDER_LABEL } from '@actuate-media/cms-core/page-sections'
import type { PageSection } from '../../../lib/page-editor-service.js'
import { str } from './parts.js'

/**
 * Canvas body for the `widget-embed` section. Shows a reserved-height placeholder
 * instead of loading third-party scripts inside the editor.
 */
export function WidgetEmbedSection({ section }: { section: PageSection }) {
  const c = section.content
  const parsed = parseWidgetEmbed(c)
  const title = str(c, 'title')
  const minHeight = parsed?.minHeightPx ?? 280

  return (
    <section className="mx-auto max-w-3xl px-6" aria-label={title || 'Third-party widget'}>
      <div
        className="bg-muted text-muted-foreground relative flex w-full flex-col items-center justify-center gap-2 overflow-hidden rounded-xl"
        style={{ minHeight: `${minHeight}px` }}
      >
        <Puzzle className="h-8 w-8" aria-hidden />
        <p className="text-foreground text-sm font-medium">
          {parsed
            ? `${WIDGET_PROVIDER_LABEL[parsed.provider]} widget`
            : 'Configure widget provider + ids'}
        </p>
        {title && <p className="text-muted-foreground px-4 text-center text-xs">{title}</p>}
      </div>
    </section>
  )
}
