'use client'

import * as React from 'react'
import { CTABlock as CTABlockType } from '../types'

interface ButtonBlockProps {
  block: CTABlockType
  onChange: (block: CTABlockType) => void
  isEditing?: boolean
}

export function ButtonBlockEditor({ block, onChange, isEditing = true }: ButtonBlockProps) {
  const buttonColor = block.buttonColor || '#2563eb'
  const textColor = block.textColor || '#ffffff'
  const borderRadius = block.borderRadius ?? 6
  const paddingH = block.paddingH ?? 24
  const paddingV = block.paddingV ?? 12

  const alignClass =
    block.alignment === 'left'
      ? 'text-left'
      : block.alignment === 'right'
        ? 'text-right'
        : 'text-center'

  const buttonStyle: React.CSSProperties = {
    display: 'inline-block',
    padding: `${paddingV}px ${paddingH}px`,
    backgroundColor: buttonColor,
    color: textColor,
    borderRadius: `${borderRadius}px`,
    textDecoration: 'none',
    fontWeight: 500,
    fontSize: 14,
    cursor: isEditing ? 'default' : 'pointer',
    border: 'none',
  }

  return (
    <div className={`py-4 ${alignClass}`}>
      <span style={buttonStyle}>{block.text || 'Button'}</span>
    </div>
  )
}