'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). Tells authors the canvas is a structural view — the real design
 * lives on the public site behind "View on site".
 */
export function StructureNotice({ structuralTypes }: { structuralTypes: string[] }) {
  if (structuralTypes.length === 0) return null
  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. Use{' '}
        <span className="text-foreground font-medium">View on site</span> for the real design.
      </span>
    </div>
  )
}
