'use client'

import { Puzzle } from 'lucide-react'

/**
 * Banner shown above the canvas surface when the document contains section
 * types the canvas can only render as placeholders (custom / unmanaged
 * types), or when Site preview is available for accurate styling.
 */
export function StructureNotice({
  structuralTypes,
  sitePreviewAvailable = false,
}: {
  structuralTypes: string[]
  /** When true, nudge editors toward the Site preview toggle for WYSIWYG. */
  sitePreviewAvailable?: boolean
}) {
  if (structuralTypes.length === 0 && !sitePreviewAvailable) return null

  if (structuralTypes.length > 0) {
    const count = structuralTypes.length
    return (
      <div
        role="note"
        className="border-border bg-card text-muted-foreground mx-auto mb-4 flex w-fit max-w-full items-center gap-2 rounded-lg border px-3 py-1.5 text-xs"
      >
        <Puzzle className="h-3.5 w-3.5 shrink-0" aria-hidden />
        <span>
          <span className="text-foreground font-medium">Structure view</span> — {count} custom
          section type{count > 1 ? 's' : ''} shown as placeholders.
          {sitePreviewAvailable ? (
            <>
              {' '}
              Use <span className="text-foreground font-medium">Site preview</span> for accurate
              styling.
            </>
          ) : (
            <>
              {' '}
              Use <span className="text-foreground font-medium">View on site</span> for the real
              design.
            </>
          )}
        </span>
      </div>
    )
  }

  return (
    <div
      role="note"
      className="border-border bg-card text-muted-foreground mx-auto mb-4 flex w-fit max-w-full items-center gap-2 rounded-lg border px-3 py-1.5 text-xs"
    >
      <Puzzle className="h-3.5 w-3.5 shrink-0" aria-hidden />
      <span>
        <span className="text-foreground font-medium">Structure preview</span> — use{' '}
        <span className="text-foreground font-medium">Site preview</span> for accurate styling.
      </span>
    </div>
  )
}
