'use client'

import { DividerBlock as DividerBlockType } from '../types'

interface DividerBlockProps {
  block: DividerBlockType
  onChange: (block: DividerBlockType) => void
  isEditing?: boolean
}

export function DividerBlockEditor({ block, onChange, isEditing = true }: DividerBlockProps) {
  const color = block.color || '#d1d5db'
  const thickness = block.thickness || 1
  const width = block.width || 100

  if (!isEditing) {
    if (block.dividerStyle === 'space') {
      return <div style={{ height: 32 }} />
    }
    return (
      <div className="my-4" style={{ textAlign: 'center' }}>
        <hr
          style={{
            display: 'inline-block',
            width: `${width}%`,
            border: 'none',
            borderTop: `${thickness}px ${block.dividerStyle} ${color}`,
            margin: 0,
          }}
        />
      </div>
    )
  }

  return (
    <div className="p-4 space-y-3">
      {/* Preview */}
      <div className="py-2">
        <DividerBlockEditor block={block} onChange={onChange} isEditing={false} />
      </div>
    </div>
  )
}