'use client'

import { SpacerBlock as SpacerBlockType } from '../types'

interface SpacerBlockProps {
  block: SpacerBlockType
  onChange: (block: SpacerBlockType) => void
  isEditing?: boolean
}

export function SpacerBlockEditor({ block, onChange, isEditing = true }: SpacerBlockProps) {
  const height = block.height || 32

  if (!isEditing) {
    return <div style={{ height }} />
  }

  return (
    <div
      className="relative border border-dashed border-gray-300 rounded flex items-center justify-center"
      style={{ height }}
    >
      <span className="text-xs text-gray-400">{height}px</span>
    </div>
  )
}