import type { ReactNode } from 'react'
import { cn } from '@/lib/cn'

/** A non-interactive hint overlaid on the canvas (empty-state guidance). */
export function EditorHint({ position = 'center', children }: { position?: 'center' | 'top'; children: ReactNode }) {
  return (
    <div
      className={cn(
        'pointer-events-none absolute flex p-6 text-center',
        position === 'top' ? 'inset-x-0 top-16 justify-center' : 'inset-0 items-center justify-center',
      )}
    >
      <p className="max-w-xs rounded-lg bg-surface/85 px-4 py-3 text-sm text-muted shadow-sm backdrop-blur">
        {children}
      </p>
    </div>
  )
}